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 0000000000..6109ca5087
--- /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/sidebar-16/page.tsx b/apps/www/__registry__/default/blocks/sidebar-16/page.tsx
new file mode 100644
index 0000000000..01313fb14e
--- /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__/index.tsx b/apps/www/__registry__/index.tsx
index 5b61ac3637..52cdfa5559 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -1139,6 +1139,49 @@ export const Index: Record<string, any> = {
       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"],
+      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,
+    },
     "login-01": {
       name: "login-01",
       description: "A simple login form.",
@@ -6394,6 +6437,49 @@ export const Index: Record<string, any> = {
       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"],
+      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.",
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 0000000000..d639e07c2e
--- /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/sidebar-16/page.tsx b/apps/www/__registry__/new-york/blocks/sidebar-16/page.tsx
new file mode 100644
index 0000000000..85d4f3b69b
--- /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/public/r/colors/index.json b/apps/www/public/r/colors/index.json
index c25158efb1..c06c452a3f 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/styles/default/sidebar-16.json b/apps/www/public/r/styles/default/sidebar-16.json
new file mode 100644
index 0000000000..7701176079
--- /dev/null
+++ b/apps/www/public/r/styles/default/sidebar-16.json
@@ -0,0 +1,70 @@
+{
+  "$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"
+  ],
+  "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=\"fle 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/v0-sidebar-16.json b/apps/www/public/r/styles/default/v0-sidebar-16.json
new file mode 100644
index 0000000000..649658c055
--- /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/sidebar-16.json b/apps/www/public/r/styles/new-york/sidebar-16.json
new file mode 100644
index 0000000000..960892745e
--- /dev/null
+++ b/apps/www/public/r/styles/new-york/sidebar-16.json
@@ -0,0 +1,70 @@
+{
+  "$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"
+  ],
+  "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=\"fle 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.json b/apps/www/public/r/styles/new-york/sidebar.json
index 7bc8689611..026f058bd6 100644
--- a/apps/www/public/r/styles/new-york/sidebar.json
+++ b/apps/www/public/r/styles/new-york/sidebar.json
@@ -20,7 +20,7 @@
   "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 { Sheet, SheetContent } 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 SidebarContext = {\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<SidebarContext | 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<SidebarContext>(\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            <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 md:block text-sidebar-foreground\"\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            \"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] 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            \"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] 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 min-h-svh flex-1 flex-col bg-background\",\n        \"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] 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        \"duration-200 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,opa] 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      \"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-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))\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(\"rounded-md h-8 flex gap-2 px-2 items-center\", 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 flex-1 max-w-[--skeleton-width]\"\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",
+      "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 { Sheet, SheetContent } 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 SidebarContext = {\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<SidebarContext | 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<SidebarContext>(\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            <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 h-svh 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 min-h-svh flex-1 flex-col bg-background\",\n        \"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] 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,opa] 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": ""
     }
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 0000000000..649658c055
--- /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/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 0000000000..4214ec36f9
--- /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 0000000000..10b836a2e3
--- /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 0000000000..85caea25e0
--- /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 0000000000..f15ddb7bb9
--- /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 0000000000..e22c32af62
--- /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 0000000000..6f62031253
--- /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 0000000000..b203091d25
--- /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="fle 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 0000000000..01313fb14e
--- /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/v0/sidebar-16.tsx b/apps/www/registry/default/v0/sidebar-16.tsx
new file mode 100644
index 0000000000..8cebc34096
--- /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/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 0000000000..c3b122038d
--- /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 0000000000..34737f6162
--- /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 0000000000..3cd543cbbf
--- /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 0000000000..a7d5a4f405
--- /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 0000000000..a12cf07ff8
--- /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 0000000000..aedcc6434a
--- /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 0000000000..2efca436cc
--- /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="fle 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 0000000000..85d4f3b69b
--- /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/internal/sidebar-16.tsx b/apps/www/registry/new-york/internal/sidebar-16.tsx
new file mode 100644
index 0000000000..e8e312e879
--- /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/ui/sidebar.tsx b/apps/www/registry/new-york/ui/sidebar.tsx
index 77e91958ed..7d44ea7d20 100644
--- a/apps/www/registry/new-york/ui/sidebar.tsx
+++ b/apps/www/registry/new-york/ui/sidebar.tsx
@@ -215,7 +215,7 @@ const Sidebar = React.forwardRef<
     return (
       <div
         ref={ref}
-        className="group peer hidden md:block text-sidebar-foreground"
+        className="group peer hidden text-sidebar-foreground md:block"
         data-state={state}
         data-collapsible={state === "collapsed" ? collapsible : ""}
         data-variant={variant}
@@ -224,7 +224,7 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "relative h-svh 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"
@@ -234,7 +234,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            "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)]",
@@ -439,7 +439,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "duration-200 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,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "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,opa] 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
       )}
@@ -631,7 +631,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "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",
@@ -659,7 +659,7 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
       {showIcon && (
@@ -669,7 +669,7 @@ const SidebarMenuSkeleton = React.forwardRef<
         />
       )}
       <Skeleton
-        className="h-4 flex-1 max-w-[--skeleton-width]"
+        className="h-4 max-w-[--skeleton-width] flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
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 0000000000..e8e312e879
--- /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-blocks.ts b/apps/www/registry/registry-blocks.ts
index 956be89548..654ee3d57c 100644
--- a/apps/www/registry/registry-blocks.ts
+++ b/apps/www/registry/registry-blocks.ts
@@ -477,6 +477,56 @@ export const blocks: Registry["items"] = [
     ],
     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",
+    ],
+    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.",