diff --git a/apps/www/__registry__/default/block/hello-block.tsx b/apps/www/__registry__/default/block/hello-block.tsx
index 77f557f1e2..f9007bfccf 100644
--- a/apps/www/__registry__/default/block/hello-block.tsx
+++ b/apps/www/__registry__/default/block/hello-block.tsx
@@ -1,24 +1,26 @@
 "use client"
 
+import { HelloCard } from "@/registry/default/block/hello-block/components/hello-card"
 import { useMediaQuery } from "@/registry/default/hooks/use-media-query"
 import { cn } from "@/registry/default/lib/utils"
 import { Button } from "@/registry/default/ui/button"
 
-export default function ExampleBlock() {
+export default function HelloBlock() {
   const isDesktop = useMediaQuery("(min-width: 768px)")
 
   return (
-    <div
+    <HelloCard
+      title="Hello Block"
       className={cn(
-        "shadow-brand p-12",
+        "p-12",
         isDesktop
           ? "bg-muted text-muted-foreground"
           : "bg-primary text-primary-foreground"
       )}
     >
-      <Button className="bg-brand-primary border-brand-secondary border-4">
-        A button
-      </Button>
-    </div>
+      <p>Hello. This is a component inside a block.</p>
+      <p>You are currently on {isDesktop ? "desktop" : "mobile"}</p>
+      <Button>Click me</Button>
+    </HelloCard>
   )
 }
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 02e3ccc3f5..c9b08615e7 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -7,7 +7,7 @@ export const Index: Record<string, any> = {
   "new-york": {
     "accordion": {
       name: "accordion",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/accordion")),
       source: "",
@@ -18,7 +18,7 @@ export const Index: Record<string, any> = {
     },
     "alert": {
       name: "alert",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/alert")),
       source: "",
@@ -29,7 +29,7 @@ export const Index: Record<string, any> = {
     },
     "alert-dialog": {
       name: "alert-dialog",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/ui/alert-dialog")),
       source: "",
@@ -40,7 +40,7 @@ export const Index: Record<string, any> = {
     },
     "aspect-ratio": {
       name: "aspect-ratio",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/aspect-ratio")),
       source: "",
@@ -51,7 +51,7 @@ export const Index: Record<string, any> = {
     },
     "avatar": {
       name: "avatar",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/avatar")),
       source: "",
@@ -62,7 +62,7 @@ export const Index: Record<string, any> = {
     },
     "badge": {
       name: "badge",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/badge")),
       source: "",
@@ -73,7 +73,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb": {
       name: "breadcrumb",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/breadcrumb")),
       source: "",
@@ -84,7 +84,7 @@ export const Index: Record<string, any> = {
     },
     "button": {
       name: "button",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/button")),
       source: "",
@@ -95,7 +95,7 @@ export const Index: Record<string, any> = {
     },
     "calendar": {
       name: "calendar",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/ui/calendar")),
       source: "",
@@ -106,7 +106,7 @@ export const Index: Record<string, any> = {
     },
     "card": {
       name: "card",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/card")),
       source: "",
@@ -117,7 +117,7 @@ export const Index: Record<string, any> = {
     },
     "carousel": {
       name: "carousel",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/ui/carousel")),
       source: "",
@@ -128,7 +128,7 @@ export const Index: Record<string, any> = {
     },
     "chart": {
       name: "chart",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["card"],
       component: React.lazy(() => import("@/registry/new-york/ui/chart")),
       source: "",
@@ -139,7 +139,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox": {
       name: "checkbox",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/checkbox")),
       source: "",
@@ -150,7 +150,7 @@ export const Index: Record<string, any> = {
     },
     "collapsible": {
       name: "collapsible",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/collapsible")),
       source: "",
@@ -161,7 +161,7 @@ export const Index: Record<string, any> = {
     },
     "command": {
       name: "command",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["dialog"],
       component: React.lazy(() => import("@/registry/new-york/ui/command")),
       source: "",
@@ -172,7 +172,7 @@ export const Index: Record<string, any> = {
     },
     "context-menu": {
       name: "context-menu",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/context-menu")),
       source: "",
@@ -183,7 +183,7 @@ export const Index: Record<string, any> = {
     },
     "dialog": {
       name: "dialog",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/dialog")),
       source: "",
@@ -194,7 +194,7 @@ export const Index: Record<string, any> = {
     },
     "drawer": {
       name: "drawer",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/drawer")),
       source: "",
@@ -205,7 +205,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu": {
       name: "dropdown-menu",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/dropdown-menu")),
       source: "",
@@ -216,7 +216,7 @@ export const Index: Record<string, any> = {
     },
     "form": {
       name: "form",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button","label"],
       component: React.lazy(() => import("@/registry/new-york/ui/form")),
       source: "",
@@ -227,7 +227,7 @@ export const Index: Record<string, any> = {
     },
     "hover-card": {
       name: "hover-card",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/hover-card")),
       source: "",
@@ -238,7 +238,7 @@ export const Index: Record<string, any> = {
     },
     "input": {
       name: "input",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/input")),
       source: "",
@@ -249,7 +249,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp": {
       name: "input-otp",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/input-otp")),
       source: "",
@@ -260,7 +260,7 @@ export const Index: Record<string, any> = {
     },
     "label": {
       name: "label",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/label")),
       source: "",
@@ -271,7 +271,7 @@ export const Index: Record<string, any> = {
     },
     "menubar": {
       name: "menubar",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/menubar")),
       source: "",
@@ -282,7 +282,7 @@ export const Index: Record<string, any> = {
     },
     "navigation-menu": {
       name: "navigation-menu",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/navigation-menu")),
       source: "",
@@ -293,7 +293,7 @@ export const Index: Record<string, any> = {
     },
     "pagination": {
       name: "pagination",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/ui/pagination")),
       source: "",
@@ -304,7 +304,7 @@ export const Index: Record<string, any> = {
     },
     "popover": {
       name: "popover",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/popover")),
       source: "",
@@ -315,7 +315,7 @@ export const Index: Record<string, any> = {
     },
     "progress": {
       name: "progress",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/progress")),
       source: "",
@@ -326,7 +326,7 @@ export const Index: Record<string, any> = {
     },
     "radio-group": {
       name: "radio-group",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/radio-group")),
       source: "",
@@ -337,7 +337,7 @@ export const Index: Record<string, any> = {
     },
     "resizable": {
       name: "resizable",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/resizable")),
       source: "",
@@ -348,7 +348,7 @@ export const Index: Record<string, any> = {
     },
     "scroll-area": {
       name: "scroll-area",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/scroll-area")),
       source: "",
@@ -359,7 +359,7 @@ export const Index: Record<string, any> = {
     },
     "select": {
       name: "select",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/select")),
       source: "",
@@ -370,7 +370,7 @@ export const Index: Record<string, any> = {
     },
     "separator": {
       name: "separator",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/separator")),
       source: "",
@@ -381,7 +381,7 @@ export const Index: Record<string, any> = {
     },
     "sheet": {
       name: "sheet",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sheet")),
       source: "",
@@ -392,7 +392,7 @@ export const Index: Record<string, any> = {
     },
     "skeleton": {
       name: "skeleton",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/skeleton")),
       source: "",
@@ -403,7 +403,7 @@ export const Index: Record<string, any> = {
     },
     "slider": {
       name: "slider",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/slider")),
       source: "",
@@ -414,7 +414,7 @@ export const Index: Record<string, any> = {
     },
     "sonner": {
       name: "sonner",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/sonner")),
       source: "",
@@ -425,7 +425,7 @@ export const Index: Record<string, any> = {
     },
     "switch": {
       name: "switch",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/switch")),
       source: "",
@@ -436,7 +436,7 @@ export const Index: Record<string, any> = {
     },
     "table": {
       name: "table",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/table")),
       source: "",
@@ -447,7 +447,7 @@ export const Index: Record<string, any> = {
     },
     "tabs": {
       name: "tabs",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/tabs")),
       source: "",
@@ -458,7 +458,7 @@ export const Index: Record<string, any> = {
     },
     "textarea": {
       name: "textarea",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/textarea")),
       source: "",
@@ -469,7 +469,7 @@ export const Index: Record<string, any> = {
     },
     "toast": {
       name: "toast",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toast")),
       source: "",
@@ -480,7 +480,7 @@ export const Index: Record<string, any> = {
     },
     "toggle": {
       name: "toggle",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/toggle")),
       source: "",
@@ -491,7 +491,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group": {
       name: "toggle-group",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/new-york/ui/toggle-group")),
       source: "",
@@ -502,7 +502,7 @@ export const Index: Record<string, any> = {
     },
     "tooltip": {
       name: "tooltip",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/ui/tooltip")),
       source: "",
@@ -513,7 +513,7 @@ export const Index: Record<string, any> = {
     },
     "accordion-demo": {
       name: "accordion-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["accordion"],
       component: React.lazy(() => import("@/registry/new-york/example/accordion-demo")),
       source: "",
@@ -524,7 +524,7 @@ export const Index: Record<string, any> = {
     },
     "alert-demo": {
       name: "alert-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["alert"],
       component: React.lazy(() => import("@/registry/new-york/example/alert-demo")),
       source: "",
@@ -535,7 +535,7 @@ export const Index: Record<string, any> = {
     },
     "alert-destructive": {
       name: "alert-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["alert"],
       component: React.lazy(() => import("@/registry/new-york/example/alert-destructive")),
       source: "",
@@ -546,7 +546,7 @@ export const Index: Record<string, any> = {
     },
     "alert-dialog-demo": {
       name: "alert-dialog-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["alert-dialog","button"],
       component: React.lazy(() => import("@/registry/new-york/example/alert-dialog-demo")),
       source: "",
@@ -557,7 +557,7 @@ export const Index: Record<string, any> = {
     },
     "aspect-ratio-demo": {
       name: "aspect-ratio-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["aspect-ratio"],
       component: React.lazy(() => import("@/registry/new-york/example/aspect-ratio-demo")),
       source: "",
@@ -568,7 +568,7 @@ export const Index: Record<string, any> = {
     },
     "avatar-demo": {
       name: "avatar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["avatar"],
       component: React.lazy(() => import("@/registry/new-york/example/avatar-demo")),
       source: "",
@@ -579,7 +579,7 @@ export const Index: Record<string, any> = {
     },
     "badge-demo": {
       name: "badge-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/new-york/example/badge-demo")),
       source: "",
@@ -590,7 +590,7 @@ export const Index: Record<string, any> = {
     },
     "badge-destructive": {
       name: "badge-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/new-york/example/badge-destructive")),
       source: "",
@@ -601,7 +601,7 @@ export const Index: Record<string, any> = {
     },
     "badge-outline": {
       name: "badge-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/new-york/example/badge-outline")),
       source: "",
@@ -612,7 +612,7 @@ export const Index: Record<string, any> = {
     },
     "badge-secondary": {
       name: "badge-secondary",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/new-york/example/badge-secondary")),
       source: "",
@@ -623,7 +623,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-demo": {
       name: "breadcrumb-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-demo")),
       source: "",
@@ -634,7 +634,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-separator": {
       name: "breadcrumb-separator",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-separator")),
       source: "",
@@ -645,7 +645,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-dropdown": {
       name: "breadcrumb-dropdown",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-dropdown")),
       source: "",
@@ -656,7 +656,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-ellipsis": {
       name: "breadcrumb-ellipsis",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-ellipsis")),
       source: "",
@@ -667,7 +667,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-link": {
       name: "breadcrumb-link",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-link")),
       source: "",
@@ -678,7 +678,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-responsive": {
       name: "breadcrumb-responsive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/new-york/example/breadcrumb-responsive")),
       source: "",
@@ -689,7 +689,7 @@ export const Index: Record<string, any> = {
     },
     "button-demo": {
       name: "button-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-demo")),
       source: "",
@@ -700,7 +700,7 @@ export const Index: Record<string, any> = {
     },
     "button-secondary": {
       name: "button-secondary",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-secondary")),
       source: "",
@@ -711,7 +711,7 @@ export const Index: Record<string, any> = {
     },
     "button-destructive": {
       name: "button-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-destructive")),
       source: "",
@@ -722,7 +722,7 @@ export const Index: Record<string, any> = {
     },
     "button-outline": {
       name: "button-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-outline")),
       source: "",
@@ -733,7 +733,7 @@ export const Index: Record<string, any> = {
     },
     "button-ghost": {
       name: "button-ghost",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-ghost")),
       source: "",
@@ -744,7 +744,7 @@ export const Index: Record<string, any> = {
     },
     "button-link": {
       name: "button-link",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-link")),
       source: "",
@@ -755,7 +755,7 @@ export const Index: Record<string, any> = {
     },
     "button-with-icon": {
       name: "button-with-icon",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-with-icon")),
       source: "",
@@ -766,7 +766,7 @@ export const Index: Record<string, any> = {
     },
     "button-loading": {
       name: "button-loading",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-loading")),
       source: "",
@@ -777,7 +777,7 @@ export const Index: Record<string, any> = {
     },
     "button-icon": {
       name: "button-icon",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-icon")),
       source: "",
@@ -788,7 +788,7 @@ export const Index: Record<string, any> = {
     },
     "button-as-child": {
       name: "button-as-child",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/new-york/example/button-as-child")),
       source: "",
@@ -799,7 +799,7 @@ export const Index: Record<string, any> = {
     },
     "calendar-demo": {
       name: "calendar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["calendar"],
       component: React.lazy(() => import("@/registry/new-york/example/calendar-demo")),
       source: "",
@@ -810,7 +810,7 @@ export const Index: Record<string, any> = {
     },
     "calendar-form": {
       name: "calendar-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["calendar","form","popover"],
       component: React.lazy(() => import("@/registry/new-york/example/calendar-form")),
       source: "",
@@ -821,7 +821,7 @@ export const Index: Record<string, any> = {
     },
     "card-demo": {
       name: "card-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["card","button","switch"],
       component: React.lazy(() => import("@/registry/new-york/example/card-demo")),
       source: "",
@@ -832,7 +832,7 @@ export const Index: Record<string, any> = {
     },
     "card-with-form": {
       name: "card-with-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","select"],
       component: React.lazy(() => import("@/registry/new-york/example/card-with-form")),
       source: "",
@@ -843,7 +843,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-demo": {
       name: "carousel-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/new-york/example/carousel-demo")),
       source: "",
@@ -854,7 +854,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-size": {
       name: "carousel-size",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/new-york/example/carousel-size")),
       source: "",
@@ -865,7 +865,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-spacing": {
       name: "carousel-spacing",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/new-york/example/carousel-spacing")),
       source: "",
@@ -876,7 +876,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-orientation": {
       name: "carousel-orientation",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/new-york/example/carousel-orientation")),
       source: "",
@@ -887,7 +887,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-api": {
       name: "carousel-api",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/new-york/example/carousel-api")),
       source: "",
@@ -898,7 +898,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-plugin": {
       name: "carousel-plugin",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/new-york/example/carousel-plugin")),
       source: "",
@@ -909,7 +909,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-demo": {
       name: "checkbox-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
       component: React.lazy(() => import("@/registry/new-york/example/checkbox-demo")),
       source: "",
@@ -920,7 +920,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-disabled": {
       name: "checkbox-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
       component: React.lazy(() => import("@/registry/new-york/example/checkbox-disabled")),
       source: "",
@@ -931,7 +931,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-form-multiple": {
       name: "checkbox-form-multiple",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox","form"],
       component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-multiple")),
       source: "",
@@ -942,7 +942,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-form-single": {
       name: "checkbox-form-single",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox","form"],
       component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-single")),
       source: "",
@@ -953,7 +953,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-with-text": {
       name: "checkbox-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
       component: React.lazy(() => import("@/registry/new-york/example/checkbox-with-text")),
       source: "",
@@ -964,7 +964,7 @@ export const Index: Record<string, any> = {
     },
     "collapsible-demo": {
       name: "collapsible-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["collapsible"],
       component: React.lazy(() => import("@/registry/new-york/example/collapsible-demo")),
       source: "",
@@ -975,7 +975,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-demo": {
       name: "combobox-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command"],
       component: React.lazy(() => import("@/registry/new-york/example/combobox-demo")),
       source: "",
@@ -986,7 +986,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-dropdown-menu": {
       name: "combobox-dropdown-menu",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command","dropdown-menu","button"],
       component: React.lazy(() => import("@/registry/new-york/example/combobox-dropdown-menu")),
       source: "",
@@ -997,7 +997,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-form": {
       name: "combobox-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command","form"],
       component: React.lazy(() => import("@/registry/new-york/example/combobox-form")),
       source: "",
@@ -1008,7 +1008,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-popover": {
       name: "combobox-popover",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["combobox","popover"],
       component: React.lazy(() => import("@/registry/new-york/example/combobox-popover")),
       source: "",
@@ -1019,7 +1019,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-responsive": {
       name: "combobox-responsive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["combobox","popover","drawer"],
       component: React.lazy(() => import("@/registry/new-york/example/combobox-responsive")),
       source: "",
@@ -1030,7 +1030,7 @@ export const Index: Record<string, any> = {
     },
     "command-demo": {
       name: "command-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command"],
       component: React.lazy(() => import("@/registry/new-york/example/command-demo")),
       source: "",
@@ -1041,7 +1041,7 @@ export const Index: Record<string, any> = {
     },
     "command-dialog": {
       name: "command-dialog",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command","dialog"],
       component: React.lazy(() => import("@/registry/new-york/example/command-dialog")),
       source: "",
@@ -1052,7 +1052,7 @@ export const Index: Record<string, any> = {
     },
     "context-menu-demo": {
       name: "context-menu-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["context-menu"],
       component: React.lazy(() => import("@/registry/new-york/example/context-menu-demo")),
       source: "",
@@ -1063,7 +1063,7 @@ export const Index: Record<string, any> = {
     },
     "data-table-demo": {
       name: "data-table-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["data-table"],
       component: React.lazy(() => import("@/registry/new-york/example/data-table-demo")),
       source: "",
@@ -1074,7 +1074,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-demo": {
       name: "date-picker-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover"],
       component: React.lazy(() => import("@/registry/new-york/example/date-picker-demo")),
       source: "",
@@ -1085,7 +1085,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-form": {
       name: "date-picker-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","form","popover"],
       component: React.lazy(() => import("@/registry/new-york/example/date-picker-form")),
       source: "",
@@ -1096,7 +1096,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-with-presets": {
       name: "date-picker-with-presets",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover","select"],
       component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-presets")),
       source: "",
@@ -1107,7 +1107,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-with-range": {
       name: "date-picker-with-range",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover"],
       component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-range")),
       source: "",
@@ -1118,7 +1118,7 @@ export const Index: Record<string, any> = {
     },
     "dialog-demo": {
       name: "dialog-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dialog"],
       component: React.lazy(() => import("@/registry/new-york/example/dialog-demo")),
       source: "",
@@ -1129,7 +1129,7 @@ export const Index: Record<string, any> = {
     },
     "dialog-close-button": {
       name: "dialog-close-button",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dialog","button"],
       component: React.lazy(() => import("@/registry/new-york/example/dialog-close-button")),
       source: "",
@@ -1140,7 +1140,7 @@ export const Index: Record<string, any> = {
     },
     "drawer-demo": {
       name: "drawer-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["drawer"],
       component: React.lazy(() => import("@/registry/new-york/example/drawer-demo")),
       source: "",
@@ -1151,7 +1151,7 @@ export const Index: Record<string, any> = {
     },
     "drawer-dialog": {
       name: "drawer-dialog",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["drawer","dialog"],
       component: React.lazy(() => import("@/registry/new-york/example/drawer-dialog")),
       source: "",
@@ -1162,7 +1162,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu-demo": {
       name: "dropdown-menu-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dropdown-menu"],
       component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-demo")),
       source: "",
@@ -1173,7 +1173,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu-checkboxes": {
       name: "dropdown-menu-checkboxes",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dropdown-menu","checkbox"],
       component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-checkboxes")),
       source: "",
@@ -1184,7 +1184,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu-radio-group": {
       name: "dropdown-menu-radio-group",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dropdown-menu","radio-group"],
       component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-radio-group")),
       source: "",
@@ -1195,7 +1195,7 @@ export const Index: Record<string, any> = {
     },
     "hover-card-demo": {
       name: "hover-card-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["hover-card"],
       component: React.lazy(() => import("@/registry/new-york/example/hover-card-demo")),
       source: "",
@@ -1206,7 +1206,7 @@ export const Index: Record<string, any> = {
     },
     "input-demo": {
       name: "input-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input"],
       component: React.lazy(() => import("@/registry/new-york/example/input-demo")),
       source: "",
@@ -1217,7 +1217,7 @@ export const Index: Record<string, any> = {
     },
     "input-disabled": {
       name: "input-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input"],
       component: React.lazy(() => import("@/registry/new-york/example/input-disabled")),
       source: "",
@@ -1228,7 +1228,7 @@ export const Index: Record<string, any> = {
     },
     "input-file": {
       name: "input-file",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input"],
       component: React.lazy(() => import("@/registry/new-york/example/input-file")),
       source: "",
@@ -1239,7 +1239,7 @@ export const Index: Record<string, any> = {
     },
     "input-form": {
       name: "input-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button","form"],
       component: React.lazy(() => import("@/registry/new-york/example/input-form")),
       source: "",
@@ -1250,7 +1250,7 @@ export const Index: Record<string, any> = {
     },
     "input-with-button": {
       name: "input-with-button",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button"],
       component: React.lazy(() => import("@/registry/new-york/example/input-with-button")),
       source: "",
@@ -1261,7 +1261,7 @@ export const Index: Record<string, any> = {
     },
     "input-with-label": {
       name: "input-with-label",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button","label"],
       component: React.lazy(() => import("@/registry/new-york/example/input-with-label")),
       source: "",
@@ -1272,7 +1272,7 @@ export const Index: Record<string, any> = {
     },
     "input-with-text": {
       name: "input-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button","label"],
       component: React.lazy(() => import("@/registry/new-york/example/input-with-text")),
       source: "",
@@ -1283,7 +1283,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-demo": {
       name: "input-otp-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/new-york/example/input-otp-demo")),
       source: "",
@@ -1294,7 +1294,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-pattern": {
       name: "input-otp-pattern",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/new-york/example/input-otp-pattern")),
       source: "",
@@ -1305,7 +1305,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-separator": {
       name: "input-otp-separator",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/new-york/example/input-otp-separator")),
       source: "",
@@ -1316,7 +1316,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-controlled": {
       name: "input-otp-controlled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/new-york/example/input-otp-controlled")),
       source: "",
@@ -1327,7 +1327,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-form": {
       name: "input-otp-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp","form"],
       component: React.lazy(() => import("@/registry/new-york/example/input-otp-form")),
       source: "",
@@ -1338,7 +1338,7 @@ export const Index: Record<string, any> = {
     },
     "label-demo": {
       name: "label-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["label"],
       component: React.lazy(() => import("@/registry/new-york/example/label-demo")),
       source: "",
@@ -1349,7 +1349,7 @@ export const Index: Record<string, any> = {
     },
     "menubar-demo": {
       name: "menubar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["menubar"],
       component: React.lazy(() => import("@/registry/new-york/example/menubar-demo")),
       source: "",
@@ -1360,7 +1360,7 @@ export const Index: Record<string, any> = {
     },
     "navigation-menu-demo": {
       name: "navigation-menu-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["navigation-menu"],
       component: React.lazy(() => import("@/registry/new-york/example/navigation-menu-demo")),
       source: "",
@@ -1371,7 +1371,7 @@ export const Index: Record<string, any> = {
     },
     "pagination-demo": {
       name: "pagination-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["pagination"],
       component: React.lazy(() => import("@/registry/new-york/example/pagination-demo")),
       source: "",
@@ -1382,7 +1382,7 @@ export const Index: Record<string, any> = {
     },
     "popover-demo": {
       name: "popover-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["popover"],
       component: React.lazy(() => import("@/registry/new-york/example/popover-demo")),
       source: "",
@@ -1393,7 +1393,7 @@ export const Index: Record<string, any> = {
     },
     "progress-demo": {
       name: "progress-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["progress"],
       component: React.lazy(() => import("@/registry/new-york/example/progress-demo")),
       source: "",
@@ -1404,7 +1404,7 @@ export const Index: Record<string, any> = {
     },
     "radio-group-demo": {
       name: "radio-group-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["radio-group"],
       component: React.lazy(() => import("@/registry/new-york/example/radio-group-demo")),
       source: "",
@@ -1415,7 +1415,7 @@ export const Index: Record<string, any> = {
     },
     "radio-group-form": {
       name: "radio-group-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["radio-group","form"],
       component: React.lazy(() => import("@/registry/new-york/example/radio-group-form")),
       source: "",
@@ -1426,7 +1426,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-demo": {
       name: "resizable-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/new-york/example/resizable-demo")),
       source: "",
@@ -1437,7 +1437,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-demo-with-handle": {
       name: "resizable-demo-with-handle",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/new-york/example/resizable-demo-with-handle")),
       source: "",
@@ -1448,7 +1448,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-vertical": {
       name: "resizable-vertical",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/new-york/example/resizable-vertical")),
       source: "",
@@ -1459,7 +1459,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-handle": {
       name: "resizable-handle",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/new-york/example/resizable-handle")),
       source: "",
@@ -1470,7 +1470,7 @@ export const Index: Record<string, any> = {
     },
     "scroll-area-demo": {
       name: "scroll-area-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["scroll-area"],
       component: React.lazy(() => import("@/registry/new-york/example/scroll-area-demo")),
       source: "",
@@ -1481,7 +1481,7 @@ export const Index: Record<string, any> = {
     },
     "scroll-area-horizontal-demo": {
       name: "scroll-area-horizontal-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["scroll-area"],
       component: React.lazy(() => import("@/registry/new-york/example/scroll-area-horizontal-demo")),
       source: "",
@@ -1492,7 +1492,7 @@ export const Index: Record<string, any> = {
     },
     "select-demo": {
       name: "select-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/new-york/example/select-demo")),
       source: "",
@@ -1503,7 +1503,7 @@ export const Index: Record<string, any> = {
     },
     "select-scrollable": {
       name: "select-scrollable",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/new-york/example/select-scrollable")),
       source: "",
@@ -1514,7 +1514,7 @@ export const Index: Record<string, any> = {
     },
     "select-form": {
       name: "select-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/new-york/example/select-form")),
       source: "",
@@ -1525,7 +1525,7 @@ export const Index: Record<string, any> = {
     },
     "separator-demo": {
       name: "separator-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["separator"],
       component: React.lazy(() => import("@/registry/new-york/example/separator-demo")),
       source: "",
@@ -1536,7 +1536,7 @@ export const Index: Record<string, any> = {
     },
     "sheet-demo": {
       name: "sheet-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["sheet"],
       component: React.lazy(() => import("@/registry/new-york/example/sheet-demo")),
       source: "",
@@ -1547,7 +1547,7 @@ export const Index: Record<string, any> = {
     },
     "sheet-side": {
       name: "sheet-side",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["sheet"],
       component: React.lazy(() => import("@/registry/new-york/example/sheet-side")),
       source: "",
@@ -1558,7 +1558,7 @@ export const Index: Record<string, any> = {
     },
     "skeleton-demo": {
       name: "skeleton-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
       component: React.lazy(() => import("@/registry/new-york/example/skeleton-demo")),
       source: "",
@@ -1569,7 +1569,7 @@ export const Index: Record<string, any> = {
     },
     "skeleton-card": {
       name: "skeleton-card",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
       component: React.lazy(() => import("@/registry/new-york/example/skeleton-card")),
       source: "",
@@ -1580,7 +1580,7 @@ export const Index: Record<string, any> = {
     },
     "slider-demo": {
       name: "slider-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["slider"],
       component: React.lazy(() => import("@/registry/new-york/example/slider-demo")),
       source: "",
@@ -1591,7 +1591,7 @@ export const Index: Record<string, any> = {
     },
     "sonner-demo": {
       name: "sonner-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["sonner"],
       component: React.lazy(() => import("@/registry/new-york/example/sonner-demo")),
       source: "",
@@ -1602,7 +1602,7 @@ export const Index: Record<string, any> = {
     },
     "switch-demo": {
       name: "switch-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["switch"],
       component: React.lazy(() => import("@/registry/new-york/example/switch-demo")),
       source: "",
@@ -1613,7 +1613,7 @@ export const Index: Record<string, any> = {
     },
     "switch-form": {
       name: "switch-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["switch","form"],
       component: React.lazy(() => import("@/registry/new-york/example/switch-form")),
       source: "",
@@ -1624,7 +1624,7 @@ export const Index: Record<string, any> = {
     },
     "table-demo": {
       name: "table-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["table"],
       component: React.lazy(() => import("@/registry/new-york/example/table-demo")),
       source: "",
@@ -1635,7 +1635,7 @@ export const Index: Record<string, any> = {
     },
     "tabs-demo": {
       name: "tabs-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["tabs"],
       component: React.lazy(() => import("@/registry/new-york/example/tabs-demo")),
       source: "",
@@ -1646,7 +1646,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-demo": {
       name: "textarea-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea"],
       component: React.lazy(() => import("@/registry/new-york/example/textarea-demo")),
       source: "",
@@ -1657,7 +1657,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-disabled": {
       name: "textarea-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea"],
       component: React.lazy(() => import("@/registry/new-york/example/textarea-disabled")),
       source: "",
@@ -1668,7 +1668,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-form": {
       name: "textarea-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","form"],
       component: React.lazy(() => import("@/registry/new-york/example/textarea-form")),
       source: "",
@@ -1679,7 +1679,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-with-button": {
       name: "textarea-with-button",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","button"],
       component: React.lazy(() => import("@/registry/new-york/example/textarea-with-button")),
       source: "",
@@ -1690,7 +1690,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-with-label": {
       name: "textarea-with-label",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","label"],
       component: React.lazy(() => import("@/registry/new-york/example/textarea-with-label")),
       source: "",
@@ -1701,7 +1701,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-with-text": {
       name: "textarea-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","label"],
       component: React.lazy(() => import("@/registry/new-york/example/textarea-with-text")),
       source: "",
@@ -1712,7 +1712,7 @@ export const Index: Record<string, any> = {
     },
     "toast-demo": {
       name: "toast-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/new-york/example/toast-demo")),
       source: "",
@@ -1723,7 +1723,7 @@ export const Index: Record<string, any> = {
     },
     "toast-destructive": {
       name: "toast-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/new-york/example/toast-destructive")),
       source: "",
@@ -1734,7 +1734,7 @@ export const Index: Record<string, any> = {
     },
     "toast-simple": {
       name: "toast-simple",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/new-york/example/toast-simple")),
       source: "",
@@ -1745,7 +1745,7 @@ export const Index: Record<string, any> = {
     },
     "toast-with-action": {
       name: "toast-with-action",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/new-york/example/toast-with-action")),
       source: "",
@@ -1756,7 +1756,7 @@ export const Index: Record<string, any> = {
     },
     "toast-with-title": {
       name: "toast-with-title",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/new-york/example/toast-with-title")),
       source: "",
@@ -1767,7 +1767,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-demo": {
       name: "toggle-group-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-group-demo")),
       source: "",
@@ -1778,7 +1778,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-disabled": {
       name: "toggle-group-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-group-disabled")),
       source: "",
@@ -1789,7 +1789,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-lg": {
       name: "toggle-group-lg",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-group-lg")),
       source: "",
@@ -1800,7 +1800,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-outline": {
       name: "toggle-group-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-group-outline")),
       source: "",
@@ -1811,7 +1811,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-sm": {
       name: "toggle-group-sm",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-group-sm")),
       source: "",
@@ -1822,7 +1822,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-single": {
       name: "toggle-group-single",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-group-single")),
       source: "",
@@ -1833,7 +1833,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-demo": {
       name: "toggle-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-demo")),
       source: "",
@@ -1844,7 +1844,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-disabled": {
       name: "toggle-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-disabled")),
       source: "",
@@ -1855,7 +1855,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-lg": {
       name: "toggle-lg",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-lg")),
       source: "",
@@ -1866,7 +1866,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-outline": {
       name: "toggle-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-outline")),
       source: "",
@@ -1877,7 +1877,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-sm": {
       name: "toggle-sm",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-sm")),
       source: "",
@@ -1888,7 +1888,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-with-text": {
       name: "toggle-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/new-york/example/toggle-with-text")),
       source: "",
@@ -1899,7 +1899,7 @@ export const Index: Record<string, any> = {
     },
     "tooltip-demo": {
       name: "tooltip-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["tooltip"],
       component: React.lazy(() => import("@/registry/new-york/example/tooltip-demo")),
       source: "",
@@ -1910,7 +1910,7 @@ export const Index: Record<string, any> = {
     },
     "typography-blockquote": {
       name: "typography-blockquote",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-blockquote")),
       source: "",
@@ -1921,7 +1921,7 @@ export const Index: Record<string, any> = {
     },
     "typography-demo": {
       name: "typography-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-demo")),
       source: "",
@@ -1932,7 +1932,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h1": {
       name: "typography-h1",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-h1")),
       source: "",
@@ -1943,7 +1943,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h2": {
       name: "typography-h2",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-h2")),
       source: "",
@@ -1954,7 +1954,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h3": {
       name: "typography-h3",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-h3")),
       source: "",
@@ -1965,7 +1965,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h4": {
       name: "typography-h4",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-h4")),
       source: "",
@@ -1976,7 +1976,7 @@ export const Index: Record<string, any> = {
     },
     "typography-inline-code": {
       name: "typography-inline-code",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-inline-code")),
       source: "",
@@ -1987,7 +1987,7 @@ export const Index: Record<string, any> = {
     },
     "typography-large": {
       name: "typography-large",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-large")),
       source: "",
@@ -1998,7 +1998,7 @@ export const Index: Record<string, any> = {
     },
     "typography-lead": {
       name: "typography-lead",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-lead")),
       source: "",
@@ -2009,7 +2009,7 @@ export const Index: Record<string, any> = {
     },
     "typography-list": {
       name: "typography-list",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-list")),
       source: "",
@@ -2020,7 +2020,7 @@ export const Index: Record<string, any> = {
     },
     "typography-muted": {
       name: "typography-muted",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-muted")),
       source: "",
@@ -2031,7 +2031,7 @@ export const Index: Record<string, any> = {
     },
     "typography-p": {
       name: "typography-p",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-p")),
       source: "",
@@ -2042,7 +2042,7 @@ export const Index: Record<string, any> = {
     },
     "typography-small": {
       name: "typography-small",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-small")),
       source: "",
@@ -2053,7 +2053,7 @@ export const Index: Record<string, any> = {
     },
     "typography-table": {
       name: "typography-table",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/typography-table")),
       source: "",
@@ -2064,7 +2064,7 @@ export const Index: Record<string, any> = {
     },
     "mode-toggle": {
       name: "mode-toggle",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/mode-toggle")),
       source: "",
@@ -2073,20 +2073,9 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "cards": {
-      name: "cards",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/new-york/example/cards")),
-      source: "",
-      files: ["registry/new-york/example/cards/cards.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
     "chart-bar-demo": {
       name: "chart-bar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo")),
       source: "",
@@ -2097,7 +2086,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-grid": {
       name: "chart-bar-demo-grid",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-grid")),
       source: "",
@@ -2108,7 +2097,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-axis": {
       name: "chart-bar-demo-axis",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-axis")),
       source: "",
@@ -2119,7 +2108,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-tooltip": {
       name: "chart-bar-demo-tooltip",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-tooltip")),
       source: "",
@@ -2130,7 +2119,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-legend": {
       name: "chart-bar-demo-legend",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/chart-bar-demo-legend")),
       source: "",
@@ -2141,7 +2130,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-demo": {
       name: "chart-tooltip-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/example/chart-tooltip-demo")),
       source: "",
@@ -2152,18 +2141,18 @@ export const Index: Record<string, any> = {
     },
     "hello-block": {
       name: "hello-block",
-      type: "components:block",
-      registryDependencies: ["button","use-media-query"],
+      type: "registry:block",
+      registryDependencies: ["button","use-media-query","card"],
       component: React.lazy(() => import("@/registry/new-york/block/hello-block")),
       source: "__registry__/new-york/block/hello-block.tsx",
-      files: ["registry/new-york/block/hello-block.tsx"],
+      files: ["registry/new-york/block/hello-block/hello-block.tsx","registry/new-york/block/hello-block/components/hello-card.tsx"],
       category: "Application",
       subcategory: "Examples",
       chunks: []
     },
     "charts-01": {
       name: "charts-01",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["chart"],
       component: React.lazy(() => import("@/registry/new-york/block/charts-01")),
       source: "__registry__/new-york/block/charts-01.tsx",
@@ -2238,7 +2227,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-05": {
       name: "dashboard-05",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
       component: React.lazy(() => import("@/registry/new-york/block/dashboard-05")),
       source: "__registry__/new-york/block/dashboard-05.tsx",
@@ -2289,7 +2278,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-06": {
       name: "dashboard-06",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
       component: React.lazy(() => import("@/registry/new-york/block/dashboard-06")),
       source: "__registry__/new-york/block/dashboard-06.tsx",
@@ -2308,7 +2297,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-07": {
       name: "dashboard-07",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
       component: React.lazy(() => import("@/registry/new-york/block/dashboard-07")),
       source: "__registry__/new-york/block/dashboard-07.tsx",
@@ -2367,7 +2356,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-04": {
       name: "dashboard-04",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","dropdown-menu","input"],
       component: React.lazy(() => import("@/registry/new-york/block/dashboard-04")),
       source: "__registry__/new-york/block/dashboard-04.tsx",
@@ -2402,7 +2391,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-03": {
       name: "dashboard-03",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
       component: React.lazy(() => import("@/registry/new-york/block/dashboard-03")),
       source: "__registry__/new-york/block/dashboard-03.tsx",
@@ -2429,7 +2418,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-02": {
       name: "dashboard-02",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","button","card","dropdown-menu","input"],
       component: React.lazy(() => import("@/registry/new-york/block/dashboard-02")),
       source: "__registry__/new-york/block/dashboard-02.tsx",
@@ -2456,7 +2445,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-01": {
       name: "dashboard-01",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","dropdown-menu","input","sheet"],
       component: React.lazy(() => import("@/registry/new-york/block/dashboard-01")),
       source: "__registry__/new-york/block/dashboard-01.tsx",
@@ -2515,7 +2504,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-01": {
       name: "authentication-01",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/new-york/block/authentication-01")),
       source: "__registry__/new-york/block/authentication-01.tsx",
@@ -2526,7 +2515,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-02": {
       name: "authentication-02",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/new-york/block/authentication-02")),
       source: "__registry__/new-york/block/authentication-02.tsx",
@@ -2537,7 +2526,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-03": {
       name: "authentication-03",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/new-york/block/authentication-03")),
       source: "__registry__/new-york/block/authentication-03.tsx",
@@ -2548,7 +2537,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-04": {
       name: "authentication-04",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/new-york/block/authentication-04")),
       source: "__registry__/new-york/block/authentication-04.tsx",
@@ -2559,7 +2548,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-axes": {
       name: "chart-area-axes",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-axes")),
       source: "__registry__/new-york/block/chart-area-axes.tsx",
@@ -2570,7 +2559,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-default": {
       name: "chart-area-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-default")),
       source: "__registry__/new-york/block/chart-area-default.tsx",
@@ -2581,7 +2570,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-gradient": {
       name: "chart-area-gradient",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-gradient")),
       source: "__registry__/new-york/block/chart-area-gradient.tsx",
@@ -2592,7 +2581,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-icons": {
       name: "chart-area-icons",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-icons")),
       source: "__registry__/new-york/block/chart-area-icons.tsx",
@@ -2603,7 +2592,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-interactive": {
       name: "chart-area-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-interactive")),
       source: "__registry__/new-york/block/chart-area-interactive.tsx",
@@ -2614,7 +2603,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-legend": {
       name: "chart-area-legend",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-legend")),
       source: "__registry__/new-york/block/chart-area-legend.tsx",
@@ -2625,7 +2614,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-linear": {
       name: "chart-area-linear",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-linear")),
       source: "__registry__/new-york/block/chart-area-linear.tsx",
@@ -2636,7 +2625,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-stacked-expand": {
       name: "chart-area-stacked-expand",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked-expand")),
       source: "__registry__/new-york/block/chart-area-stacked-expand.tsx",
@@ -2647,7 +2636,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-stacked": {
       name: "chart-area-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-stacked")),
       source: "__registry__/new-york/block/chart-area-stacked.tsx",
@@ -2658,7 +2647,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-step": {
       name: "chart-area-step",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-area-step")),
       source: "__registry__/new-york/block/chart-area-step.tsx",
@@ -2669,7 +2658,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-active": {
       name: "chart-bar-active",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-active")),
       source: "__registry__/new-york/block/chart-bar-active.tsx",
@@ -2680,7 +2669,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-default": {
       name: "chart-bar-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-default")),
       source: "__registry__/new-york/block/chart-bar-default.tsx",
@@ -2691,7 +2680,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-horizontal": {
       name: "chart-bar-horizontal",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-horizontal")),
       source: "__registry__/new-york/block/chart-bar-horizontal.tsx",
@@ -2702,7 +2691,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-interactive": {
       name: "chart-bar-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-interactive")),
       source: "__registry__/new-york/block/chart-bar-interactive.tsx",
@@ -2713,7 +2702,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-label-custom": {
       name: "chart-bar-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label-custom")),
       source: "__registry__/new-york/block/chart-bar-label-custom.tsx",
@@ -2724,7 +2713,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-label": {
       name: "chart-bar-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-label")),
       source: "__registry__/new-york/block/chart-bar-label.tsx",
@@ -2735,7 +2724,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-mixed": {
       name: "chart-bar-mixed",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-mixed")),
       source: "__registry__/new-york/block/chart-bar-mixed.tsx",
@@ -2746,7 +2735,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-multiple": {
       name: "chart-bar-multiple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-multiple")),
       source: "__registry__/new-york/block/chart-bar-multiple.tsx",
@@ -2757,7 +2746,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-negative": {
       name: "chart-bar-negative",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-negative")),
       source: "__registry__/new-york/block/chart-bar-negative.tsx",
@@ -2768,7 +2757,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-stacked": {
       name: "chart-bar-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-bar-stacked")),
       source: "__registry__/new-york/block/chart-bar-stacked.tsx",
@@ -2779,7 +2768,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-default": {
       name: "chart-line-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-default")),
       source: "__registry__/new-york/block/chart-line-default.tsx",
@@ -2790,7 +2779,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-dots-colors": {
       name: "chart-line-dots-colors",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-colors")),
       source: "__registry__/new-york/block/chart-line-dots-colors.tsx",
@@ -2801,7 +2790,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-dots-custom": {
       name: "chart-line-dots-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots-custom")),
       source: "__registry__/new-york/block/chart-line-dots-custom.tsx",
@@ -2812,7 +2801,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-dots": {
       name: "chart-line-dots",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-dots")),
       source: "__registry__/new-york/block/chart-line-dots.tsx",
@@ -2823,7 +2812,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-interactive": {
       name: "chart-line-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-interactive")),
       source: "__registry__/new-york/block/chart-line-interactive.tsx",
@@ -2834,7 +2823,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-label-custom": {
       name: "chart-line-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-label-custom")),
       source: "__registry__/new-york/block/chart-line-label-custom.tsx",
@@ -2845,7 +2834,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-label": {
       name: "chart-line-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-label")),
       source: "__registry__/new-york/block/chart-line-label.tsx",
@@ -2856,7 +2845,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-linear": {
       name: "chart-line-linear",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-linear")),
       source: "__registry__/new-york/block/chart-line-linear.tsx",
@@ -2867,7 +2856,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-multiple": {
       name: "chart-line-multiple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-multiple")),
       source: "__registry__/new-york/block/chart-line-multiple.tsx",
@@ -2878,7 +2867,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-step": {
       name: "chart-line-step",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-line-step")),
       source: "__registry__/new-york/block/chart-line-step.tsx",
@@ -2889,7 +2878,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-donut-active": {
       name: "chart-pie-donut-active",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-active")),
       source: "__registry__/new-york/block/chart-pie-donut-active.tsx",
@@ -2900,7 +2889,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-donut-text": {
       name: "chart-pie-donut-text",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut-text")),
       source: "__registry__/new-york/block/chart-pie-donut-text.tsx",
@@ -2911,7 +2900,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-donut": {
       name: "chart-pie-donut",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-donut")),
       source: "__registry__/new-york/block/chart-pie-donut.tsx",
@@ -2922,7 +2911,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-interactive": {
       name: "chart-pie-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-interactive")),
       source: "__registry__/new-york/block/chart-pie-interactive.tsx",
@@ -2933,7 +2922,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-label-custom": {
       name: "chart-pie-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-custom")),
       source: "__registry__/new-york/block/chart-pie-label-custom.tsx",
@@ -2944,7 +2933,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-label-list": {
       name: "chart-pie-label-list",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label-list")),
       source: "__registry__/new-york/block/chart-pie-label-list.tsx",
@@ -2955,7 +2944,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-label": {
       name: "chart-pie-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-label")),
       source: "__registry__/new-york/block/chart-pie-label.tsx",
@@ -2966,7 +2955,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-legend": {
       name: "chart-pie-legend",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-legend")),
       source: "__registry__/new-york/block/chart-pie-legend.tsx",
@@ -2977,7 +2966,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-separator-none": {
       name: "chart-pie-separator-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-separator-none")),
       source: "__registry__/new-york/block/chart-pie-separator-none.tsx",
@@ -2988,7 +2977,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-simple": {
       name: "chart-pie-simple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-simple")),
       source: "__registry__/new-york/block/chart-pie-simple.tsx",
@@ -2999,7 +2988,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-stacked": {
       name: "chart-pie-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-pie-stacked")),
       source: "__registry__/new-york/block/chart-pie-stacked.tsx",
@@ -3010,7 +2999,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-default": {
       name: "chart-radar-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-default")),
       source: "__registry__/new-york/block/chart-radar-default.tsx",
@@ -3021,7 +3010,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-dots": {
       name: "chart-radar-dots",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-dots")),
       source: "__registry__/new-york/block/chart-radar-dots.tsx",
@@ -3032,7 +3021,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-circle-fill": {
       name: "chart-radar-grid-circle-fill",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-fill")),
       source: "__registry__/new-york/block/chart-radar-grid-circle-fill.tsx",
@@ -3043,7 +3032,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-circle-no-lines": {
       name: "chart-radar-grid-circle-no-lines",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle-no-lines")),
       source: "__registry__/new-york/block/chart-radar-grid-circle-no-lines.tsx",
@@ -3054,7 +3043,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-circle": {
       name: "chart-radar-grid-circle",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-circle")),
       source: "__registry__/new-york/block/chart-radar-grid-circle.tsx",
@@ -3065,7 +3054,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-custom": {
       name: "chart-radar-grid-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-custom")),
       source: "__registry__/new-york/block/chart-radar-grid-custom.tsx",
@@ -3076,7 +3065,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-fill": {
       name: "chart-radar-grid-fill",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-fill")),
       source: "__registry__/new-york/block/chart-radar-grid-fill.tsx",
@@ -3087,7 +3076,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-none": {
       name: "chart-radar-grid-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-grid-none")),
       source: "__registry__/new-york/block/chart-radar-grid-none.tsx",
@@ -3098,7 +3087,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-icons": {
       name: "chart-radar-icons",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-icons")),
       source: "__registry__/new-york/block/chart-radar-icons.tsx",
@@ -3109,7 +3098,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-label-custom": {
       name: "chart-radar-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-label-custom")),
       source: "__registry__/new-york/block/chart-radar-label-custom.tsx",
@@ -3120,7 +3109,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-legend": {
       name: "chart-radar-legend",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-legend")),
       source: "__registry__/new-york/block/chart-radar-legend.tsx",
@@ -3131,7 +3120,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-lines-only": {
       name: "chart-radar-lines-only",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-lines-only")),
       source: "__registry__/new-york/block/chart-radar-lines-only.tsx",
@@ -3142,7 +3131,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-multiple": {
       name: "chart-radar-multiple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-multiple")),
       source: "__registry__/new-york/block/chart-radar-multiple.tsx",
@@ -3153,7 +3142,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-radius": {
       name: "chart-radar-radius",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radar-radius")),
       source: "__registry__/new-york/block/chart-radar-radius.tsx",
@@ -3164,7 +3153,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-grid": {
       name: "chart-radial-grid",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radial-grid")),
       source: "__registry__/new-york/block/chart-radial-grid.tsx",
@@ -3175,7 +3164,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-label": {
       name: "chart-radial-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radial-label")),
       source: "__registry__/new-york/block/chart-radial-label.tsx",
@@ -3186,7 +3175,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-shape": {
       name: "chart-radial-shape",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radial-shape")),
       source: "__registry__/new-york/block/chart-radial-shape.tsx",
@@ -3197,7 +3186,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-simple": {
       name: "chart-radial-simple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radial-simple")),
       source: "__registry__/new-york/block/chart-radial-simple.tsx",
@@ -3208,7 +3197,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-stacked": {
       name: "chart-radial-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radial-stacked")),
       source: "__registry__/new-york/block/chart-radial-stacked.tsx",
@@ -3219,7 +3208,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-text": {
       name: "chart-radial-text",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-radial-text")),
       source: "__registry__/new-york/block/chart-radial-text.tsx",
@@ -3230,7 +3219,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-default": {
       name: "chart-tooltip-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-default")),
       source: "__registry__/new-york/block/chart-tooltip-default.tsx",
@@ -3241,7 +3230,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-indicator-line": {
       name: "chart-tooltip-indicator-line",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-line")),
       source: "__registry__/new-york/block/chart-tooltip-indicator-line.tsx",
@@ -3252,7 +3241,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-indicator-none": {
       name: "chart-tooltip-indicator-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-indicator-none")),
       source: "__registry__/new-york/block/chart-tooltip-indicator-none.tsx",
@@ -3263,7 +3252,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-label-none": {
       name: "chart-tooltip-label-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-none")),
       source: "__registry__/new-york/block/chart-tooltip-label-none.tsx",
@@ -3274,7 +3263,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-label-custom": {
       name: "chart-tooltip-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-custom")),
       source: "__registry__/new-york/block/chart-tooltip-label-custom.tsx",
@@ -3285,7 +3274,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-label-formatter": {
       name: "chart-tooltip-label-formatter",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-label-formatter")),
       source: "__registry__/new-york/block/chart-tooltip-label-formatter.tsx",
@@ -3296,7 +3285,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-formatter": {
       name: "chart-tooltip-formatter",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-formatter")),
       source: "__registry__/new-york/block/chart-tooltip-formatter.tsx",
@@ -3307,7 +3296,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-icons": {
       name: "chart-tooltip-icons",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-icons")),
       source: "__registry__/new-york/block/chart-tooltip-icons.tsx",
@@ -3318,7 +3307,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-advanced": {
       name: "chart-tooltip-advanced",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/new-york/block/chart-tooltip-advanced")),
       source: "__registry__/new-york/block/chart-tooltip-advanced.tsx",
@@ -3333,7 +3322,7 @@ export const Index: Record<string, any> = {
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/lib/utils")),
       source: "",
-      files: ["registry/new-york/[object Object]"],
+      files: ["registry/new-york/lib/utils.ts"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []
@@ -3344,7 +3333,7 @@ export const Index: Record<string, any> = {
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/new-york/hook/use-media-query")),
       source: "",
-      files: ["registry/new-york/[object Object]"],
+      files: ["registry/new-york/hooks/use-media-query.ts"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []
@@ -3352,7 +3341,7 @@ export const Index: Record<string, any> = {
   },  "default": {
     "accordion": {
       name: "accordion",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/accordion")),
       source: "",
@@ -3363,7 +3352,7 @@ export const Index: Record<string, any> = {
     },
     "alert": {
       name: "alert",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/alert")),
       source: "",
@@ -3374,7 +3363,7 @@ export const Index: Record<string, any> = {
     },
     "alert-dialog": {
       name: "alert-dialog",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/ui/alert-dialog")),
       source: "",
@@ -3385,7 +3374,7 @@ export const Index: Record<string, any> = {
     },
     "aspect-ratio": {
       name: "aspect-ratio",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/aspect-ratio")),
       source: "",
@@ -3396,7 +3385,7 @@ export const Index: Record<string, any> = {
     },
     "avatar": {
       name: "avatar",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/avatar")),
       source: "",
@@ -3407,7 +3396,7 @@ export const Index: Record<string, any> = {
     },
     "badge": {
       name: "badge",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/badge")),
       source: "",
@@ -3418,7 +3407,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb": {
       name: "breadcrumb",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/breadcrumb")),
       source: "",
@@ -3429,7 +3418,7 @@ export const Index: Record<string, any> = {
     },
     "button": {
       name: "button",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/button")),
       source: "",
@@ -3440,7 +3429,7 @@ export const Index: Record<string, any> = {
     },
     "calendar": {
       name: "calendar",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/ui/calendar")),
       source: "",
@@ -3451,7 +3440,7 @@ export const Index: Record<string, any> = {
     },
     "card": {
       name: "card",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/card")),
       source: "",
@@ -3462,7 +3451,7 @@ export const Index: Record<string, any> = {
     },
     "carousel": {
       name: "carousel",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/ui/carousel")),
       source: "",
@@ -3473,7 +3462,7 @@ export const Index: Record<string, any> = {
     },
     "chart": {
       name: "chart",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["card"],
       component: React.lazy(() => import("@/registry/default/ui/chart")),
       source: "",
@@ -3484,7 +3473,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox": {
       name: "checkbox",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/checkbox")),
       source: "",
@@ -3495,7 +3484,7 @@ export const Index: Record<string, any> = {
     },
     "collapsible": {
       name: "collapsible",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/collapsible")),
       source: "",
@@ -3506,7 +3495,7 @@ export const Index: Record<string, any> = {
     },
     "command": {
       name: "command",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["dialog"],
       component: React.lazy(() => import("@/registry/default/ui/command")),
       source: "",
@@ -3517,7 +3506,7 @@ export const Index: Record<string, any> = {
     },
     "context-menu": {
       name: "context-menu",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/context-menu")),
       source: "",
@@ -3528,7 +3517,7 @@ export const Index: Record<string, any> = {
     },
     "dialog": {
       name: "dialog",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/dialog")),
       source: "",
@@ -3539,7 +3528,7 @@ export const Index: Record<string, any> = {
     },
     "drawer": {
       name: "drawer",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/drawer")),
       source: "",
@@ -3550,7 +3539,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu": {
       name: "dropdown-menu",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/dropdown-menu")),
       source: "",
@@ -3561,7 +3550,7 @@ export const Index: Record<string, any> = {
     },
     "form": {
       name: "form",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button","label"],
       component: React.lazy(() => import("@/registry/default/ui/form")),
       source: "",
@@ -3572,7 +3561,7 @@ export const Index: Record<string, any> = {
     },
     "hover-card": {
       name: "hover-card",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/hover-card")),
       source: "",
@@ -3583,7 +3572,7 @@ export const Index: Record<string, any> = {
     },
     "input": {
       name: "input",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/input")),
       source: "",
@@ -3594,7 +3583,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp": {
       name: "input-otp",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/input-otp")),
       source: "",
@@ -3605,7 +3594,7 @@ export const Index: Record<string, any> = {
     },
     "label": {
       name: "label",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/label")),
       source: "",
@@ -3616,7 +3605,7 @@ export const Index: Record<string, any> = {
     },
     "menubar": {
       name: "menubar",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/menubar")),
       source: "",
@@ -3627,7 +3616,7 @@ export const Index: Record<string, any> = {
     },
     "navigation-menu": {
       name: "navigation-menu",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/navigation-menu")),
       source: "",
@@ -3638,7 +3627,7 @@ export const Index: Record<string, any> = {
     },
     "pagination": {
       name: "pagination",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/ui/pagination")),
       source: "",
@@ -3649,7 +3638,7 @@ export const Index: Record<string, any> = {
     },
     "popover": {
       name: "popover",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/popover")),
       source: "",
@@ -3660,7 +3649,7 @@ export const Index: Record<string, any> = {
     },
     "progress": {
       name: "progress",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/progress")),
       source: "",
@@ -3671,7 +3660,7 @@ export const Index: Record<string, any> = {
     },
     "radio-group": {
       name: "radio-group",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/radio-group")),
       source: "",
@@ -3682,7 +3671,7 @@ export const Index: Record<string, any> = {
     },
     "resizable": {
       name: "resizable",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/resizable")),
       source: "",
@@ -3693,7 +3682,7 @@ export const Index: Record<string, any> = {
     },
     "scroll-area": {
       name: "scroll-area",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/scroll-area")),
       source: "",
@@ -3704,7 +3693,7 @@ export const Index: Record<string, any> = {
     },
     "select": {
       name: "select",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/select")),
       source: "",
@@ -3715,7 +3704,7 @@ export const Index: Record<string, any> = {
     },
     "separator": {
       name: "separator",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/separator")),
       source: "",
@@ -3726,7 +3715,7 @@ export const Index: Record<string, any> = {
     },
     "sheet": {
       name: "sheet",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sheet")),
       source: "",
@@ -3737,7 +3726,7 @@ export const Index: Record<string, any> = {
     },
     "skeleton": {
       name: "skeleton",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/skeleton")),
       source: "",
@@ -3748,7 +3737,7 @@ export const Index: Record<string, any> = {
     },
     "slider": {
       name: "slider",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/slider")),
       source: "",
@@ -3759,7 +3748,7 @@ export const Index: Record<string, any> = {
     },
     "sonner": {
       name: "sonner",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/sonner")),
       source: "",
@@ -3770,7 +3759,7 @@ export const Index: Record<string, any> = {
     },
     "switch": {
       name: "switch",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/switch")),
       source: "",
@@ -3781,7 +3770,7 @@ export const Index: Record<string, any> = {
     },
     "table": {
       name: "table",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/table")),
       source: "",
@@ -3792,7 +3781,7 @@ export const Index: Record<string, any> = {
     },
     "tabs": {
       name: "tabs",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/tabs")),
       source: "",
@@ -3803,7 +3792,7 @@ export const Index: Record<string, any> = {
     },
     "textarea": {
       name: "textarea",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/textarea")),
       source: "",
@@ -3814,7 +3803,7 @@ export const Index: Record<string, any> = {
     },
     "toast": {
       name: "toast",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/toast")),
       source: "",
@@ -3825,7 +3814,7 @@ export const Index: Record<string, any> = {
     },
     "toggle": {
       name: "toggle",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/toggle")),
       source: "",
@@ -3836,7 +3825,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group": {
       name: "toggle-group",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/default/ui/toggle-group")),
       source: "",
@@ -3847,7 +3836,7 @@ export const Index: Record<string, any> = {
     },
     "tooltip": {
       name: "tooltip",
-      type: "components:ui",
+      type: "registry:ui",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/ui/tooltip")),
       source: "",
@@ -3858,7 +3847,7 @@ export const Index: Record<string, any> = {
     },
     "accordion-demo": {
       name: "accordion-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["accordion"],
       component: React.lazy(() => import("@/registry/default/example/accordion-demo")),
       source: "",
@@ -3869,7 +3858,7 @@ export const Index: Record<string, any> = {
     },
     "alert-demo": {
       name: "alert-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["alert"],
       component: React.lazy(() => import("@/registry/default/example/alert-demo")),
       source: "",
@@ -3880,7 +3869,7 @@ export const Index: Record<string, any> = {
     },
     "alert-destructive": {
       name: "alert-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["alert"],
       component: React.lazy(() => import("@/registry/default/example/alert-destructive")),
       source: "",
@@ -3891,7 +3880,7 @@ export const Index: Record<string, any> = {
     },
     "alert-dialog-demo": {
       name: "alert-dialog-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["alert-dialog","button"],
       component: React.lazy(() => import("@/registry/default/example/alert-dialog-demo")),
       source: "",
@@ -3902,7 +3891,7 @@ export const Index: Record<string, any> = {
     },
     "aspect-ratio-demo": {
       name: "aspect-ratio-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["aspect-ratio"],
       component: React.lazy(() => import("@/registry/default/example/aspect-ratio-demo")),
       source: "",
@@ -3913,7 +3902,7 @@ export const Index: Record<string, any> = {
     },
     "avatar-demo": {
       name: "avatar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["avatar"],
       component: React.lazy(() => import("@/registry/default/example/avatar-demo")),
       source: "",
@@ -3924,7 +3913,7 @@ export const Index: Record<string, any> = {
     },
     "badge-demo": {
       name: "badge-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/default/example/badge-demo")),
       source: "",
@@ -3935,7 +3924,7 @@ export const Index: Record<string, any> = {
     },
     "badge-destructive": {
       name: "badge-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/default/example/badge-destructive")),
       source: "",
@@ -3946,7 +3935,7 @@ export const Index: Record<string, any> = {
     },
     "badge-outline": {
       name: "badge-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/default/example/badge-outline")),
       source: "",
@@ -3957,7 +3946,7 @@ export const Index: Record<string, any> = {
     },
     "badge-secondary": {
       name: "badge-secondary",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["badge"],
       component: React.lazy(() => import("@/registry/default/example/badge-secondary")),
       source: "",
@@ -3968,7 +3957,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-demo": {
       name: "breadcrumb-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/default/example/breadcrumb-demo")),
       source: "",
@@ -3979,7 +3968,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-separator": {
       name: "breadcrumb-separator",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/default/example/breadcrumb-separator")),
       source: "",
@@ -3990,7 +3979,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-dropdown": {
       name: "breadcrumb-dropdown",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/default/example/breadcrumb-dropdown")),
       source: "",
@@ -4001,7 +3990,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-ellipsis": {
       name: "breadcrumb-ellipsis",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/default/example/breadcrumb-ellipsis")),
       source: "",
@@ -4012,7 +4001,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-link": {
       name: "breadcrumb-link",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/default/example/breadcrumb-link")),
       source: "",
@@ -4023,7 +4012,7 @@ export const Index: Record<string, any> = {
     },
     "breadcrumb-responsive": {
       name: "breadcrumb-responsive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["breadcrumb"],
       component: React.lazy(() => import("@/registry/default/example/breadcrumb-responsive")),
       source: "",
@@ -4034,7 +4023,7 @@ export const Index: Record<string, any> = {
     },
     "button-demo": {
       name: "button-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-demo")),
       source: "",
@@ -4045,7 +4034,7 @@ export const Index: Record<string, any> = {
     },
     "button-secondary": {
       name: "button-secondary",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-secondary")),
       source: "",
@@ -4056,7 +4045,7 @@ export const Index: Record<string, any> = {
     },
     "button-destructive": {
       name: "button-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-destructive")),
       source: "",
@@ -4067,7 +4056,7 @@ export const Index: Record<string, any> = {
     },
     "button-outline": {
       name: "button-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-outline")),
       source: "",
@@ -4078,7 +4067,7 @@ export const Index: Record<string, any> = {
     },
     "button-ghost": {
       name: "button-ghost",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-ghost")),
       source: "",
@@ -4089,7 +4078,7 @@ export const Index: Record<string, any> = {
     },
     "button-link": {
       name: "button-link",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-link")),
       source: "",
@@ -4100,7 +4089,7 @@ export const Index: Record<string, any> = {
     },
     "button-with-icon": {
       name: "button-with-icon",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-with-icon")),
       source: "",
@@ -4111,7 +4100,7 @@ export const Index: Record<string, any> = {
     },
     "button-loading": {
       name: "button-loading",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-loading")),
       source: "",
@@ -4122,7 +4111,7 @@ export const Index: Record<string, any> = {
     },
     "button-icon": {
       name: "button-icon",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-icon")),
       source: "",
@@ -4133,7 +4122,7 @@ export const Index: Record<string, any> = {
     },
     "button-as-child": {
       name: "button-as-child",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button"],
       component: React.lazy(() => import("@/registry/default/example/button-as-child")),
       source: "",
@@ -4144,7 +4133,7 @@ export const Index: Record<string, any> = {
     },
     "calendar-demo": {
       name: "calendar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["calendar"],
       component: React.lazy(() => import("@/registry/default/example/calendar-demo")),
       source: "",
@@ -4155,7 +4144,7 @@ export const Index: Record<string, any> = {
     },
     "calendar-form": {
       name: "calendar-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["calendar","form","popover"],
       component: React.lazy(() => import("@/registry/default/example/calendar-form")),
       source: "",
@@ -4166,7 +4155,7 @@ export const Index: Record<string, any> = {
     },
     "card-demo": {
       name: "card-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["card","button","switch"],
       component: React.lazy(() => import("@/registry/default/example/card-demo")),
       source: "",
@@ -4177,7 +4166,7 @@ export const Index: Record<string, any> = {
     },
     "card-with-form": {
       name: "card-with-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","card","input","label","select"],
       component: React.lazy(() => import("@/registry/default/example/card-with-form")),
       source: "",
@@ -4188,7 +4177,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-demo": {
       name: "carousel-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/default/example/carousel-demo")),
       source: "",
@@ -4199,7 +4188,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-size": {
       name: "carousel-size",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/default/example/carousel-size")),
       source: "",
@@ -4210,7 +4199,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-spacing": {
       name: "carousel-spacing",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/default/example/carousel-spacing")),
       source: "",
@@ -4221,7 +4210,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-orientation": {
       name: "carousel-orientation",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/default/example/carousel-orientation")),
       source: "",
@@ -4232,7 +4221,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-api": {
       name: "carousel-api",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/default/example/carousel-api")),
       source: "",
@@ -4243,7 +4232,7 @@ export const Index: Record<string, any> = {
     },
     "carousel-plugin": {
       name: "carousel-plugin",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["carousel"],
       component: React.lazy(() => import("@/registry/default/example/carousel-plugin")),
       source: "",
@@ -4254,7 +4243,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-demo": {
       name: "checkbox-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
       component: React.lazy(() => import("@/registry/default/example/checkbox-demo")),
       source: "",
@@ -4265,7 +4254,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-disabled": {
       name: "checkbox-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
       component: React.lazy(() => import("@/registry/default/example/checkbox-disabled")),
       source: "",
@@ -4276,7 +4265,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-form-multiple": {
       name: "checkbox-form-multiple",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox","form"],
       component: React.lazy(() => import("@/registry/default/example/checkbox-form-multiple")),
       source: "",
@@ -4287,7 +4276,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-form-single": {
       name: "checkbox-form-single",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox","form"],
       component: React.lazy(() => import("@/registry/default/example/checkbox-form-single")),
       source: "",
@@ -4298,7 +4287,7 @@ export const Index: Record<string, any> = {
     },
     "checkbox-with-text": {
       name: "checkbox-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["checkbox"],
       component: React.lazy(() => import("@/registry/default/example/checkbox-with-text")),
       source: "",
@@ -4309,7 +4298,7 @@ export const Index: Record<string, any> = {
     },
     "collapsible-demo": {
       name: "collapsible-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["collapsible"],
       component: React.lazy(() => import("@/registry/default/example/collapsible-demo")),
       source: "",
@@ -4320,7 +4309,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-demo": {
       name: "combobox-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command"],
       component: React.lazy(() => import("@/registry/default/example/combobox-demo")),
       source: "",
@@ -4331,7 +4320,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-dropdown-menu": {
       name: "combobox-dropdown-menu",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command","dropdown-menu","button"],
       component: React.lazy(() => import("@/registry/default/example/combobox-dropdown-menu")),
       source: "",
@@ -4342,7 +4331,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-form": {
       name: "combobox-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command","form"],
       component: React.lazy(() => import("@/registry/default/example/combobox-form")),
       source: "",
@@ -4353,7 +4342,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-popover": {
       name: "combobox-popover",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["combobox","popover"],
       component: React.lazy(() => import("@/registry/default/example/combobox-popover")),
       source: "",
@@ -4364,7 +4353,7 @@ export const Index: Record<string, any> = {
     },
     "combobox-responsive": {
       name: "combobox-responsive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["combobox","popover","drawer"],
       component: React.lazy(() => import("@/registry/default/example/combobox-responsive")),
       source: "",
@@ -4375,7 +4364,7 @@ export const Index: Record<string, any> = {
     },
     "command-demo": {
       name: "command-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command"],
       component: React.lazy(() => import("@/registry/default/example/command-demo")),
       source: "",
@@ -4386,7 +4375,7 @@ export const Index: Record<string, any> = {
     },
     "command-dialog": {
       name: "command-dialog",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["command","dialog"],
       component: React.lazy(() => import("@/registry/default/example/command-dialog")),
       source: "",
@@ -4397,7 +4386,7 @@ export const Index: Record<string, any> = {
     },
     "context-menu-demo": {
       name: "context-menu-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["context-menu"],
       component: React.lazy(() => import("@/registry/default/example/context-menu-demo")),
       source: "",
@@ -4408,7 +4397,7 @@ export const Index: Record<string, any> = {
     },
     "data-table-demo": {
       name: "data-table-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["data-table"],
       component: React.lazy(() => import("@/registry/default/example/data-table-demo")),
       source: "",
@@ -4419,7 +4408,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-demo": {
       name: "date-picker-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover"],
       component: React.lazy(() => import("@/registry/default/example/date-picker-demo")),
       source: "",
@@ -4430,7 +4419,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-form": {
       name: "date-picker-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","form","popover"],
       component: React.lazy(() => import("@/registry/default/example/date-picker-form")),
       source: "",
@@ -4441,7 +4430,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-with-presets": {
       name: "date-picker-with-presets",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover","select"],
       component: React.lazy(() => import("@/registry/default/example/date-picker-with-presets")),
       source: "",
@@ -4452,7 +4441,7 @@ export const Index: Record<string, any> = {
     },
     "date-picker-with-range": {
       name: "date-picker-with-range",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["button","calendar","popover"],
       component: React.lazy(() => import("@/registry/default/example/date-picker-with-range")),
       source: "",
@@ -4463,7 +4452,7 @@ export const Index: Record<string, any> = {
     },
     "dialog-demo": {
       name: "dialog-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dialog"],
       component: React.lazy(() => import("@/registry/default/example/dialog-demo")),
       source: "",
@@ -4474,7 +4463,7 @@ export const Index: Record<string, any> = {
     },
     "dialog-close-button": {
       name: "dialog-close-button",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dialog","button"],
       component: React.lazy(() => import("@/registry/default/example/dialog-close-button")),
       source: "",
@@ -4485,7 +4474,7 @@ export const Index: Record<string, any> = {
     },
     "drawer-demo": {
       name: "drawer-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["drawer"],
       component: React.lazy(() => import("@/registry/default/example/drawer-demo")),
       source: "",
@@ -4496,7 +4485,7 @@ export const Index: Record<string, any> = {
     },
     "drawer-dialog": {
       name: "drawer-dialog",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["drawer","dialog"],
       component: React.lazy(() => import("@/registry/default/example/drawer-dialog")),
       source: "",
@@ -4507,7 +4496,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu-demo": {
       name: "dropdown-menu-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dropdown-menu"],
       component: React.lazy(() => import("@/registry/default/example/dropdown-menu-demo")),
       source: "",
@@ -4518,7 +4507,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu-checkboxes": {
       name: "dropdown-menu-checkboxes",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dropdown-menu","checkbox"],
       component: React.lazy(() => import("@/registry/default/example/dropdown-menu-checkboxes")),
       source: "",
@@ -4529,7 +4518,7 @@ export const Index: Record<string, any> = {
     },
     "dropdown-menu-radio-group": {
       name: "dropdown-menu-radio-group",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["dropdown-menu","radio-group"],
       component: React.lazy(() => import("@/registry/default/example/dropdown-menu-radio-group")),
       source: "",
@@ -4540,7 +4529,7 @@ export const Index: Record<string, any> = {
     },
     "hover-card-demo": {
       name: "hover-card-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["hover-card"],
       component: React.lazy(() => import("@/registry/default/example/hover-card-demo")),
       source: "",
@@ -4551,7 +4540,7 @@ export const Index: Record<string, any> = {
     },
     "input-demo": {
       name: "input-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input"],
       component: React.lazy(() => import("@/registry/default/example/input-demo")),
       source: "",
@@ -4562,7 +4551,7 @@ export const Index: Record<string, any> = {
     },
     "input-disabled": {
       name: "input-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input"],
       component: React.lazy(() => import("@/registry/default/example/input-disabled")),
       source: "",
@@ -4573,7 +4562,7 @@ export const Index: Record<string, any> = {
     },
     "input-file": {
       name: "input-file",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input"],
       component: React.lazy(() => import("@/registry/default/example/input-file")),
       source: "",
@@ -4584,7 +4573,7 @@ export const Index: Record<string, any> = {
     },
     "input-form": {
       name: "input-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button","form"],
       component: React.lazy(() => import("@/registry/default/example/input-form")),
       source: "",
@@ -4595,7 +4584,7 @@ export const Index: Record<string, any> = {
     },
     "input-with-button": {
       name: "input-with-button",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button"],
       component: React.lazy(() => import("@/registry/default/example/input-with-button")),
       source: "",
@@ -4606,7 +4595,7 @@ export const Index: Record<string, any> = {
     },
     "input-with-label": {
       name: "input-with-label",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button","label"],
       component: React.lazy(() => import("@/registry/default/example/input-with-label")),
       source: "",
@@ -4617,7 +4606,7 @@ export const Index: Record<string, any> = {
     },
     "input-with-text": {
       name: "input-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input","button","label"],
       component: React.lazy(() => import("@/registry/default/example/input-with-text")),
       source: "",
@@ -4628,7 +4617,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-demo": {
       name: "input-otp-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/default/example/input-otp-demo")),
       source: "",
@@ -4639,7 +4628,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-pattern": {
       name: "input-otp-pattern",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/default/example/input-otp-pattern")),
       source: "",
@@ -4650,7 +4639,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-separator": {
       name: "input-otp-separator",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/default/example/input-otp-separator")),
       source: "",
@@ -4661,7 +4650,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-controlled": {
       name: "input-otp-controlled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp"],
       component: React.lazy(() => import("@/registry/default/example/input-otp-controlled")),
       source: "",
@@ -4672,7 +4661,7 @@ export const Index: Record<string, any> = {
     },
     "input-otp-form": {
       name: "input-otp-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["input-otp","form"],
       component: React.lazy(() => import("@/registry/default/example/input-otp-form")),
       source: "",
@@ -4683,7 +4672,7 @@ export const Index: Record<string, any> = {
     },
     "label-demo": {
       name: "label-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["label"],
       component: React.lazy(() => import("@/registry/default/example/label-demo")),
       source: "",
@@ -4694,7 +4683,7 @@ export const Index: Record<string, any> = {
     },
     "menubar-demo": {
       name: "menubar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["menubar"],
       component: React.lazy(() => import("@/registry/default/example/menubar-demo")),
       source: "",
@@ -4705,7 +4694,7 @@ export const Index: Record<string, any> = {
     },
     "navigation-menu-demo": {
       name: "navigation-menu-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["navigation-menu"],
       component: React.lazy(() => import("@/registry/default/example/navigation-menu-demo")),
       source: "",
@@ -4716,7 +4705,7 @@ export const Index: Record<string, any> = {
     },
     "pagination-demo": {
       name: "pagination-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["pagination"],
       component: React.lazy(() => import("@/registry/default/example/pagination-demo")),
       source: "",
@@ -4727,7 +4716,7 @@ export const Index: Record<string, any> = {
     },
     "popover-demo": {
       name: "popover-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["popover"],
       component: React.lazy(() => import("@/registry/default/example/popover-demo")),
       source: "",
@@ -4738,7 +4727,7 @@ export const Index: Record<string, any> = {
     },
     "progress-demo": {
       name: "progress-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["progress"],
       component: React.lazy(() => import("@/registry/default/example/progress-demo")),
       source: "",
@@ -4749,7 +4738,7 @@ export const Index: Record<string, any> = {
     },
     "radio-group-demo": {
       name: "radio-group-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["radio-group"],
       component: React.lazy(() => import("@/registry/default/example/radio-group-demo")),
       source: "",
@@ -4760,7 +4749,7 @@ export const Index: Record<string, any> = {
     },
     "radio-group-form": {
       name: "radio-group-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["radio-group","form"],
       component: React.lazy(() => import("@/registry/default/example/radio-group-form")),
       source: "",
@@ -4771,7 +4760,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-demo": {
       name: "resizable-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/default/example/resizable-demo")),
       source: "",
@@ -4782,7 +4771,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-demo-with-handle": {
       name: "resizable-demo-with-handle",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/default/example/resizable-demo-with-handle")),
       source: "",
@@ -4793,7 +4782,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-vertical": {
       name: "resizable-vertical",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/default/example/resizable-vertical")),
       source: "",
@@ -4804,7 +4793,7 @@ export const Index: Record<string, any> = {
     },
     "resizable-handle": {
       name: "resizable-handle",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["resizable"],
       component: React.lazy(() => import("@/registry/default/example/resizable-handle")),
       source: "",
@@ -4815,7 +4804,7 @@ export const Index: Record<string, any> = {
     },
     "scroll-area-demo": {
       name: "scroll-area-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["scroll-area"],
       component: React.lazy(() => import("@/registry/default/example/scroll-area-demo")),
       source: "",
@@ -4826,7 +4815,7 @@ export const Index: Record<string, any> = {
     },
     "scroll-area-horizontal-demo": {
       name: "scroll-area-horizontal-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["scroll-area"],
       component: React.lazy(() => import("@/registry/default/example/scroll-area-horizontal-demo")),
       source: "",
@@ -4837,7 +4826,7 @@ export const Index: Record<string, any> = {
     },
     "select-demo": {
       name: "select-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/default/example/select-demo")),
       source: "",
@@ -4848,7 +4837,7 @@ export const Index: Record<string, any> = {
     },
     "select-scrollable": {
       name: "select-scrollable",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/default/example/select-scrollable")),
       source: "",
@@ -4859,7 +4848,7 @@ export const Index: Record<string, any> = {
     },
     "select-form": {
       name: "select-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["select"],
       component: React.lazy(() => import("@/registry/default/example/select-form")),
       source: "",
@@ -4870,7 +4859,7 @@ export const Index: Record<string, any> = {
     },
     "separator-demo": {
       name: "separator-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["separator"],
       component: React.lazy(() => import("@/registry/default/example/separator-demo")),
       source: "",
@@ -4881,7 +4870,7 @@ export const Index: Record<string, any> = {
     },
     "sheet-demo": {
       name: "sheet-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["sheet"],
       component: React.lazy(() => import("@/registry/default/example/sheet-demo")),
       source: "",
@@ -4892,7 +4881,7 @@ export const Index: Record<string, any> = {
     },
     "sheet-side": {
       name: "sheet-side",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["sheet"],
       component: React.lazy(() => import("@/registry/default/example/sheet-side")),
       source: "",
@@ -4903,7 +4892,7 @@ export const Index: Record<string, any> = {
     },
     "skeleton-demo": {
       name: "skeleton-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
       component: React.lazy(() => import("@/registry/default/example/skeleton-demo")),
       source: "",
@@ -4914,7 +4903,7 @@ export const Index: Record<string, any> = {
     },
     "skeleton-card": {
       name: "skeleton-card",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["skeleton"],
       component: React.lazy(() => import("@/registry/default/example/skeleton-card")),
       source: "",
@@ -4925,7 +4914,7 @@ export const Index: Record<string, any> = {
     },
     "slider-demo": {
       name: "slider-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["slider"],
       component: React.lazy(() => import("@/registry/default/example/slider-demo")),
       source: "",
@@ -4936,7 +4925,7 @@ export const Index: Record<string, any> = {
     },
     "sonner-demo": {
       name: "sonner-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["sonner"],
       component: React.lazy(() => import("@/registry/default/example/sonner-demo")),
       source: "",
@@ -4947,7 +4936,7 @@ export const Index: Record<string, any> = {
     },
     "switch-demo": {
       name: "switch-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["switch"],
       component: React.lazy(() => import("@/registry/default/example/switch-demo")),
       source: "",
@@ -4958,7 +4947,7 @@ export const Index: Record<string, any> = {
     },
     "switch-form": {
       name: "switch-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["switch","form"],
       component: React.lazy(() => import("@/registry/default/example/switch-form")),
       source: "",
@@ -4969,7 +4958,7 @@ export const Index: Record<string, any> = {
     },
     "table-demo": {
       name: "table-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["table"],
       component: React.lazy(() => import("@/registry/default/example/table-demo")),
       source: "",
@@ -4980,7 +4969,7 @@ export const Index: Record<string, any> = {
     },
     "tabs-demo": {
       name: "tabs-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["tabs"],
       component: React.lazy(() => import("@/registry/default/example/tabs-demo")),
       source: "",
@@ -4991,7 +4980,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-demo": {
       name: "textarea-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea"],
       component: React.lazy(() => import("@/registry/default/example/textarea-demo")),
       source: "",
@@ -5002,7 +4991,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-disabled": {
       name: "textarea-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea"],
       component: React.lazy(() => import("@/registry/default/example/textarea-disabled")),
       source: "",
@@ -5013,7 +5002,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-form": {
       name: "textarea-form",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","form"],
       component: React.lazy(() => import("@/registry/default/example/textarea-form")),
       source: "",
@@ -5024,7 +5013,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-with-button": {
       name: "textarea-with-button",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","button"],
       component: React.lazy(() => import("@/registry/default/example/textarea-with-button")),
       source: "",
@@ -5035,7 +5024,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-with-label": {
       name: "textarea-with-label",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","label"],
       component: React.lazy(() => import("@/registry/default/example/textarea-with-label")),
       source: "",
@@ -5046,7 +5035,7 @@ export const Index: Record<string, any> = {
     },
     "textarea-with-text": {
       name: "textarea-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["textarea","label"],
       component: React.lazy(() => import("@/registry/default/example/textarea-with-text")),
       source: "",
@@ -5057,7 +5046,7 @@ export const Index: Record<string, any> = {
     },
     "toast-demo": {
       name: "toast-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/default/example/toast-demo")),
       source: "",
@@ -5068,7 +5057,7 @@ export const Index: Record<string, any> = {
     },
     "toast-destructive": {
       name: "toast-destructive",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/default/example/toast-destructive")),
       source: "",
@@ -5079,7 +5068,7 @@ export const Index: Record<string, any> = {
     },
     "toast-simple": {
       name: "toast-simple",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/default/example/toast-simple")),
       source: "",
@@ -5090,7 +5079,7 @@ export const Index: Record<string, any> = {
     },
     "toast-with-action": {
       name: "toast-with-action",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/default/example/toast-with-action")),
       source: "",
@@ -5101,7 +5090,7 @@ export const Index: Record<string, any> = {
     },
     "toast-with-title": {
       name: "toast-with-title",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toast"],
       component: React.lazy(() => import("@/registry/default/example/toast-with-title")),
       source: "",
@@ -5112,7 +5101,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-demo": {
       name: "toggle-group-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/default/example/toggle-group-demo")),
       source: "",
@@ -5123,7 +5112,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-disabled": {
       name: "toggle-group-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/default/example/toggle-group-disabled")),
       source: "",
@@ -5134,7 +5123,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-lg": {
       name: "toggle-group-lg",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/default/example/toggle-group-lg")),
       source: "",
@@ -5145,7 +5134,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-outline": {
       name: "toggle-group-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/default/example/toggle-group-outline")),
       source: "",
@@ -5156,7 +5145,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-sm": {
       name: "toggle-group-sm",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/default/example/toggle-group-sm")),
       source: "",
@@ -5167,7 +5156,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-group-single": {
       name: "toggle-group-single",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle-group"],
       component: React.lazy(() => import("@/registry/default/example/toggle-group-single")),
       source: "",
@@ -5178,7 +5167,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-demo": {
       name: "toggle-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/default/example/toggle-demo")),
       source: "",
@@ -5189,7 +5178,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-disabled": {
       name: "toggle-disabled",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/default/example/toggle-disabled")),
       source: "",
@@ -5200,7 +5189,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-lg": {
       name: "toggle-lg",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/default/example/toggle-lg")),
       source: "",
@@ -5211,7 +5200,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-outline": {
       name: "toggle-outline",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/default/example/toggle-outline")),
       source: "",
@@ -5222,7 +5211,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-sm": {
       name: "toggle-sm",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/default/example/toggle-sm")),
       source: "",
@@ -5233,7 +5222,7 @@ export const Index: Record<string, any> = {
     },
     "toggle-with-text": {
       name: "toggle-with-text",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["toggle"],
       component: React.lazy(() => import("@/registry/default/example/toggle-with-text")),
       source: "",
@@ -5244,7 +5233,7 @@ export const Index: Record<string, any> = {
     },
     "tooltip-demo": {
       name: "tooltip-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: ["tooltip"],
       component: React.lazy(() => import("@/registry/default/example/tooltip-demo")),
       source: "",
@@ -5255,7 +5244,7 @@ export const Index: Record<string, any> = {
     },
     "typography-blockquote": {
       name: "typography-blockquote",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-blockquote")),
       source: "",
@@ -5266,7 +5255,7 @@ export const Index: Record<string, any> = {
     },
     "typography-demo": {
       name: "typography-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-demo")),
       source: "",
@@ -5277,7 +5266,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h1": {
       name: "typography-h1",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-h1")),
       source: "",
@@ -5288,7 +5277,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h2": {
       name: "typography-h2",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-h2")),
       source: "",
@@ -5299,7 +5288,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h3": {
       name: "typography-h3",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-h3")),
       source: "",
@@ -5310,7 +5299,7 @@ export const Index: Record<string, any> = {
     },
     "typography-h4": {
       name: "typography-h4",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-h4")),
       source: "",
@@ -5321,7 +5310,7 @@ export const Index: Record<string, any> = {
     },
     "typography-inline-code": {
       name: "typography-inline-code",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-inline-code")),
       source: "",
@@ -5332,7 +5321,7 @@ export const Index: Record<string, any> = {
     },
     "typography-large": {
       name: "typography-large",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-large")),
       source: "",
@@ -5343,7 +5332,7 @@ export const Index: Record<string, any> = {
     },
     "typography-lead": {
       name: "typography-lead",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-lead")),
       source: "",
@@ -5354,7 +5343,7 @@ export const Index: Record<string, any> = {
     },
     "typography-list": {
       name: "typography-list",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-list")),
       source: "",
@@ -5365,7 +5354,7 @@ export const Index: Record<string, any> = {
     },
     "typography-muted": {
       name: "typography-muted",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-muted")),
       source: "",
@@ -5376,7 +5365,7 @@ export const Index: Record<string, any> = {
     },
     "typography-p": {
       name: "typography-p",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-p")),
       source: "",
@@ -5387,7 +5376,7 @@ export const Index: Record<string, any> = {
     },
     "typography-small": {
       name: "typography-small",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-small")),
       source: "",
@@ -5398,7 +5387,7 @@ export const Index: Record<string, any> = {
     },
     "typography-table": {
       name: "typography-table",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/typography-table")),
       source: "",
@@ -5409,7 +5398,7 @@ export const Index: Record<string, any> = {
     },
     "mode-toggle": {
       name: "mode-toggle",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/mode-toggle")),
       source: "",
@@ -5418,20 +5407,9 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "cards": {
-      name: "cards",
-      type: "components:example",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/example/cards")),
-      source: "",
-      files: ["registry/default/example/cards/cards.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
     "chart-bar-demo": {
       name: "chart-bar-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/chart-bar-demo")),
       source: "",
@@ -5442,7 +5420,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-grid": {
       name: "chart-bar-demo-grid",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-grid")),
       source: "",
@@ -5453,7 +5431,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-axis": {
       name: "chart-bar-demo-axis",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-axis")),
       source: "",
@@ -5464,7 +5442,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-tooltip": {
       name: "chart-bar-demo-tooltip",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-tooltip")),
       source: "",
@@ -5475,7 +5453,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-demo-legend": {
       name: "chart-bar-demo-legend",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/chart-bar-demo-legend")),
       source: "",
@@ -5486,7 +5464,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-demo": {
       name: "chart-tooltip-demo",
-      type: "components:example",
+      type: "registry:example",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/example/chart-tooltip-demo")),
       source: "",
@@ -5497,18 +5475,18 @@ export const Index: Record<string, any> = {
     },
     "hello-block": {
       name: "hello-block",
-      type: "components:block",
-      registryDependencies: ["button","use-media-query"],
+      type: "registry:block",
+      registryDependencies: ["button","use-media-query","card"],
       component: React.lazy(() => import("@/registry/default/block/hello-block")),
       source: "__registry__/default/block/hello-block.tsx",
-      files: ["registry/default/block/hello-block.tsx"],
+      files: ["registry/default/block/hello-block/hello-block.tsx","registry/default/block/hello-block/components/hello-card.tsx"],
       category: "Application",
       subcategory: "Examples",
       chunks: []
     },
     "charts-01": {
       name: "charts-01",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["chart"],
       component: React.lazy(() => import("@/registry/default/block/charts-01")),
       source: "__registry__/default/block/charts-01.tsx",
@@ -5583,7 +5561,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-05": {
       name: "dashboard-05",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
       component: React.lazy(() => import("@/registry/default/block/dashboard-05")),
       source: "__registry__/default/block/dashboard-05.tsx",
@@ -5634,7 +5612,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-06": {
       name: "dashboard-06",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
       component: React.lazy(() => import("@/registry/default/block/dashboard-06")),
       source: "__registry__/default/block/dashboard-06.tsx",
@@ -5653,7 +5631,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-07": {
       name: "dashboard-07",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
       component: React.lazy(() => import("@/registry/default/block/dashboard-07")),
       source: "__registry__/default/block/dashboard-07.tsx",
@@ -5712,7 +5690,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-04": {
       name: "dashboard-04",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","dropdown-menu","input"],
       component: React.lazy(() => import("@/registry/default/block/dashboard-04")),
       source: "__registry__/default/block/dashboard-04.tsx",
@@ -5747,7 +5725,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-03": {
       name: "dashboard-03",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
       component: React.lazy(() => import("@/registry/default/block/dashboard-03")),
       source: "__registry__/default/block/dashboard-03.tsx",
@@ -5774,7 +5752,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-02": {
       name: "dashboard-02",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["badge","button","card","dropdown-menu","input"],
       component: React.lazy(() => import("@/registry/default/block/dashboard-02")),
       source: "__registry__/default/block/dashboard-02.tsx",
@@ -5801,7 +5779,7 @@ export const Index: Record<string, any> = {
     },
     "dashboard-01": {
       name: "dashboard-01",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","dropdown-menu","input","sheet"],
       component: React.lazy(() => import("@/registry/default/block/dashboard-01")),
       source: "__registry__/default/block/dashboard-01.tsx",
@@ -5860,7 +5838,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-01": {
       name: "authentication-01",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/default/block/authentication-01")),
       source: "__registry__/default/block/authentication-01.tsx",
@@ -5871,7 +5849,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-02": {
       name: "authentication-02",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/default/block/authentication-02")),
       source: "__registry__/default/block/authentication-02.tsx",
@@ -5882,7 +5860,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-03": {
       name: "authentication-03",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/default/block/authentication-03")),
       source: "__registry__/default/block/authentication-03.tsx",
@@ -5893,7 +5871,7 @@ export const Index: Record<string, any> = {
     },
     "authentication-04": {
       name: "authentication-04",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["button","card","input","label"],
       component: React.lazy(() => import("@/registry/default/block/authentication-04")),
       source: "__registry__/default/block/authentication-04.tsx",
@@ -5904,7 +5882,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-axes": {
       name: "chart-area-axes",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-axes")),
       source: "__registry__/default/block/chart-area-axes.tsx",
@@ -5915,7 +5893,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-default": {
       name: "chart-area-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-default")),
       source: "__registry__/default/block/chart-area-default.tsx",
@@ -5926,7 +5904,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-gradient": {
       name: "chart-area-gradient",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-gradient")),
       source: "__registry__/default/block/chart-area-gradient.tsx",
@@ -5937,7 +5915,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-icons": {
       name: "chart-area-icons",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-icons")),
       source: "__registry__/default/block/chart-area-icons.tsx",
@@ -5948,7 +5926,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-interactive": {
       name: "chart-area-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-interactive")),
       source: "__registry__/default/block/chart-area-interactive.tsx",
@@ -5959,7 +5937,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-legend": {
       name: "chart-area-legend",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-legend")),
       source: "__registry__/default/block/chart-area-legend.tsx",
@@ -5970,7 +5948,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-linear": {
       name: "chart-area-linear",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-linear")),
       source: "__registry__/default/block/chart-area-linear.tsx",
@@ -5981,7 +5959,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-stacked-expand": {
       name: "chart-area-stacked-expand",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-stacked-expand")),
       source: "__registry__/default/block/chart-area-stacked-expand.tsx",
@@ -5992,7 +5970,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-stacked": {
       name: "chart-area-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-stacked")),
       source: "__registry__/default/block/chart-area-stacked.tsx",
@@ -6003,7 +5981,7 @@ export const Index: Record<string, any> = {
     },
     "chart-area-step": {
       name: "chart-area-step",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-area-step")),
       source: "__registry__/default/block/chart-area-step.tsx",
@@ -6014,7 +5992,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-active": {
       name: "chart-bar-active",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-active")),
       source: "__registry__/default/block/chart-bar-active.tsx",
@@ -6025,7 +6003,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-default": {
       name: "chart-bar-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-default")),
       source: "__registry__/default/block/chart-bar-default.tsx",
@@ -6036,7 +6014,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-horizontal": {
       name: "chart-bar-horizontal",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-horizontal")),
       source: "__registry__/default/block/chart-bar-horizontal.tsx",
@@ -6047,7 +6025,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-interactive": {
       name: "chart-bar-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-interactive")),
       source: "__registry__/default/block/chart-bar-interactive.tsx",
@@ -6058,7 +6036,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-label-custom": {
       name: "chart-bar-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-label-custom")),
       source: "__registry__/default/block/chart-bar-label-custom.tsx",
@@ -6069,7 +6047,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-label": {
       name: "chart-bar-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-label")),
       source: "__registry__/default/block/chart-bar-label.tsx",
@@ -6080,7 +6058,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-mixed": {
       name: "chart-bar-mixed",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-mixed")),
       source: "__registry__/default/block/chart-bar-mixed.tsx",
@@ -6091,7 +6069,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-multiple": {
       name: "chart-bar-multiple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-multiple")),
       source: "__registry__/default/block/chart-bar-multiple.tsx",
@@ -6102,7 +6080,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-negative": {
       name: "chart-bar-negative",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-negative")),
       source: "__registry__/default/block/chart-bar-negative.tsx",
@@ -6113,7 +6091,7 @@ export const Index: Record<string, any> = {
     },
     "chart-bar-stacked": {
       name: "chart-bar-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-bar-stacked")),
       source: "__registry__/default/block/chart-bar-stacked.tsx",
@@ -6124,7 +6102,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-default": {
       name: "chart-line-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-default")),
       source: "__registry__/default/block/chart-line-default.tsx",
@@ -6135,7 +6113,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-dots-colors": {
       name: "chart-line-dots-colors",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-dots-colors")),
       source: "__registry__/default/block/chart-line-dots-colors.tsx",
@@ -6146,7 +6124,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-dots-custom": {
       name: "chart-line-dots-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-dots-custom")),
       source: "__registry__/default/block/chart-line-dots-custom.tsx",
@@ -6157,7 +6135,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-dots": {
       name: "chart-line-dots",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-dots")),
       source: "__registry__/default/block/chart-line-dots.tsx",
@@ -6168,7 +6146,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-interactive": {
       name: "chart-line-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-interactive")),
       source: "__registry__/default/block/chart-line-interactive.tsx",
@@ -6179,7 +6157,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-label-custom": {
       name: "chart-line-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-label-custom")),
       source: "__registry__/default/block/chart-line-label-custom.tsx",
@@ -6190,7 +6168,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-label": {
       name: "chart-line-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-label")),
       source: "__registry__/default/block/chart-line-label.tsx",
@@ -6201,7 +6179,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-linear": {
       name: "chart-line-linear",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-linear")),
       source: "__registry__/default/block/chart-line-linear.tsx",
@@ -6212,7 +6190,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-multiple": {
       name: "chart-line-multiple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-multiple")),
       source: "__registry__/default/block/chart-line-multiple.tsx",
@@ -6223,7 +6201,7 @@ export const Index: Record<string, any> = {
     },
     "chart-line-step": {
       name: "chart-line-step",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-line-step")),
       source: "__registry__/default/block/chart-line-step.tsx",
@@ -6234,7 +6212,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-donut-active": {
       name: "chart-pie-donut-active",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-donut-active")),
       source: "__registry__/default/block/chart-pie-donut-active.tsx",
@@ -6245,7 +6223,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-donut-text": {
       name: "chart-pie-donut-text",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-donut-text")),
       source: "__registry__/default/block/chart-pie-donut-text.tsx",
@@ -6256,7 +6234,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-donut": {
       name: "chart-pie-donut",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-donut")),
       source: "__registry__/default/block/chart-pie-donut.tsx",
@@ -6267,7 +6245,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-interactive": {
       name: "chart-pie-interactive",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-interactive")),
       source: "__registry__/default/block/chart-pie-interactive.tsx",
@@ -6278,7 +6256,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-label-custom": {
       name: "chart-pie-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-label-custom")),
       source: "__registry__/default/block/chart-pie-label-custom.tsx",
@@ -6289,7 +6267,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-label-list": {
       name: "chart-pie-label-list",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-label-list")),
       source: "__registry__/default/block/chart-pie-label-list.tsx",
@@ -6300,7 +6278,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-label": {
       name: "chart-pie-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-label")),
       source: "__registry__/default/block/chart-pie-label.tsx",
@@ -6311,7 +6289,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-legend": {
       name: "chart-pie-legend",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-legend")),
       source: "__registry__/default/block/chart-pie-legend.tsx",
@@ -6322,7 +6300,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-separator-none": {
       name: "chart-pie-separator-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-separator-none")),
       source: "__registry__/default/block/chart-pie-separator-none.tsx",
@@ -6333,7 +6311,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-simple": {
       name: "chart-pie-simple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-simple")),
       source: "__registry__/default/block/chart-pie-simple.tsx",
@@ -6344,7 +6322,7 @@ export const Index: Record<string, any> = {
     },
     "chart-pie-stacked": {
       name: "chart-pie-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-pie-stacked")),
       source: "__registry__/default/block/chart-pie-stacked.tsx",
@@ -6355,7 +6333,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-default": {
       name: "chart-radar-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-default")),
       source: "__registry__/default/block/chart-radar-default.tsx",
@@ -6366,7 +6344,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-dots": {
       name: "chart-radar-dots",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-dots")),
       source: "__registry__/default/block/chart-radar-dots.tsx",
@@ -6377,7 +6355,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-circle-fill": {
       name: "chart-radar-grid-circle-fill",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle-fill")),
       source: "__registry__/default/block/chart-radar-grid-circle-fill.tsx",
@@ -6388,7 +6366,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-circle-no-lines": {
       name: "chart-radar-grid-circle-no-lines",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle-no-lines")),
       source: "__registry__/default/block/chart-radar-grid-circle-no-lines.tsx",
@@ -6399,7 +6377,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-circle": {
       name: "chart-radar-grid-circle",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-circle")),
       source: "__registry__/default/block/chart-radar-grid-circle.tsx",
@@ -6410,7 +6388,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-custom": {
       name: "chart-radar-grid-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-custom")),
       source: "__registry__/default/block/chart-radar-grid-custom.tsx",
@@ -6421,7 +6399,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-fill": {
       name: "chart-radar-grid-fill",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-fill")),
       source: "__registry__/default/block/chart-radar-grid-fill.tsx",
@@ -6432,7 +6410,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-grid-none": {
       name: "chart-radar-grid-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-grid-none")),
       source: "__registry__/default/block/chart-radar-grid-none.tsx",
@@ -6443,7 +6421,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-icons": {
       name: "chart-radar-icons",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-icons")),
       source: "__registry__/default/block/chart-radar-icons.tsx",
@@ -6454,7 +6432,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-label-custom": {
       name: "chart-radar-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-label-custom")),
       source: "__registry__/default/block/chart-radar-label-custom.tsx",
@@ -6465,7 +6443,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-legend": {
       name: "chart-radar-legend",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-legend")),
       source: "__registry__/default/block/chart-radar-legend.tsx",
@@ -6476,7 +6454,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-lines-only": {
       name: "chart-radar-lines-only",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-lines-only")),
       source: "__registry__/default/block/chart-radar-lines-only.tsx",
@@ -6487,7 +6465,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-multiple": {
       name: "chart-radar-multiple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-multiple")),
       source: "__registry__/default/block/chart-radar-multiple.tsx",
@@ -6498,7 +6476,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radar-radius": {
       name: "chart-radar-radius",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radar-radius")),
       source: "__registry__/default/block/chart-radar-radius.tsx",
@@ -6509,7 +6487,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-grid": {
       name: "chart-radial-grid",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radial-grid")),
       source: "__registry__/default/block/chart-radial-grid.tsx",
@@ -6520,7 +6498,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-label": {
       name: "chart-radial-label",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radial-label")),
       source: "__registry__/default/block/chart-radial-label.tsx",
@@ -6531,7 +6509,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-shape": {
       name: "chart-radial-shape",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radial-shape")),
       source: "__registry__/default/block/chart-radial-shape.tsx",
@@ -6542,7 +6520,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-simple": {
       name: "chart-radial-simple",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radial-simple")),
       source: "__registry__/default/block/chart-radial-simple.tsx",
@@ -6553,7 +6531,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-stacked": {
       name: "chart-radial-stacked",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radial-stacked")),
       source: "__registry__/default/block/chart-radial-stacked.tsx",
@@ -6564,7 +6542,7 @@ export const Index: Record<string, any> = {
     },
     "chart-radial-text": {
       name: "chart-radial-text",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-radial-text")),
       source: "__registry__/default/block/chart-radial-text.tsx",
@@ -6575,7 +6553,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-default": {
       name: "chart-tooltip-default",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-default")),
       source: "__registry__/default/block/chart-tooltip-default.tsx",
@@ -6586,7 +6564,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-indicator-line": {
       name: "chart-tooltip-indicator-line",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-line")),
       source: "__registry__/default/block/chart-tooltip-indicator-line.tsx",
@@ -6597,7 +6575,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-indicator-none": {
       name: "chart-tooltip-indicator-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-indicator-none")),
       source: "__registry__/default/block/chart-tooltip-indicator-none.tsx",
@@ -6608,7 +6586,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-label-none": {
       name: "chart-tooltip-label-none",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-none")),
       source: "__registry__/default/block/chart-tooltip-label-none.tsx",
@@ -6619,7 +6597,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-label-custom": {
       name: "chart-tooltip-label-custom",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-custom")),
       source: "__registry__/default/block/chart-tooltip-label-custom.tsx",
@@ -6630,7 +6608,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-label-formatter": {
       name: "chart-tooltip-label-formatter",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-label-formatter")),
       source: "__registry__/default/block/chart-tooltip-label-formatter.tsx",
@@ -6641,7 +6619,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-formatter": {
       name: "chart-tooltip-formatter",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-formatter")),
       source: "__registry__/default/block/chart-tooltip-formatter.tsx",
@@ -6652,7 +6630,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-icons": {
       name: "chart-tooltip-icons",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-icons")),
       source: "__registry__/default/block/chart-tooltip-icons.tsx",
@@ -6663,7 +6641,7 @@ export const Index: Record<string, any> = {
     },
     "chart-tooltip-advanced": {
       name: "chart-tooltip-advanced",
-      type: "components:block",
+      type: "registry:block",
       registryDependencies: ["card","chart"],
       component: React.lazy(() => import("@/registry/default/block/chart-tooltip-advanced")),
       source: "__registry__/default/block/chart-tooltip-advanced.tsx",
@@ -6678,7 +6656,7 @@ export const Index: Record<string, any> = {
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/lib/utils")),
       source: "",
-      files: ["registry/default/[object Object]"],
+      files: ["registry/default/lib/utils.ts"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []
@@ -6689,7 +6667,7 @@ export const Index: Record<string, any> = {
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/hook/use-media-query")),
       source: "",
-      files: ["registry/default/[object Object]"],
+      files: ["registry/default/hooks/use-media-query.ts"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []
diff --git a/apps/www/__registry__/new-york/block/hello-block.tsx b/apps/www/__registry__/new-york/block/hello-block.tsx
index 1456ac136c..521d2078ea 100644
--- a/apps/www/__registry__/new-york/block/hello-block.tsx
+++ b/apps/www/__registry__/new-york/block/hello-block.tsx
@@ -1,14 +1,16 @@
 "use client"
 
+import { HelloCard } from "@/registry/new-york/block/hello-block/components/hello-card"
 import { useMediaQuery } from "@/registry/new-york/hooks/use-media-query"
 import { cn } from "@/registry/new-york/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
 
-export default function ExampleBlock() {
+export default function HelloBlock() {
   const isDesktop = useMediaQuery("(min-width: 768px)")
 
   return (
-    <div
+    <HelloCard
+      title="Hello Block"
       className={cn(
         "p-12",
         isDesktop
@@ -16,7 +18,9 @@ export default function ExampleBlock() {
           : "bg-primary text-primary-foreground"
       )}
     >
-      <Button>A button</Button>
-    </div>
+      <p>Hello. This is a component inside a block.</p>
+      <p>You are currently on {isDesktop ? "desktop" : "mobile"}</p>
+      <Button>Click me</Button>
+    </HelloCard>
   )
 }
diff --git a/apps/www/__registry__/new-york/component/accordion-demo.tsx b/apps/www/__registry__/new-york/component/accordion-demo.tsx
new file mode 100644
index 0000000000..6d15f48a1b
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/accordion-demo.tsx
@@ -0,0 +1,32 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/new-york/ui/accordion"
+
+export default function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other
+          components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/alert-demo.tsx b/apps/www/__registry__/new-york/component/alert-demo.tsx
new file mode 100644
index 0000000000..78ae628200
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/alert-demo.tsx
@@ -0,0 +1,19 @@
+import { RocketIcon } from "@radix-ui/react-icons"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
+
+export default function AlertDemo() {
+  return (
+    <Alert>
+      <RocketIcon className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/alert-destructive.tsx b/apps/www/__registry__/new-york/component/alert-destructive.tsx
new file mode 100644
index 0000000000..f09ba842e7
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/alert-destructive.tsx
@@ -0,0 +1,19 @@
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/new-york/ui/alert"
+
+export default function AlertDestructive() {
+  return (
+    <Alert variant="destructive">
+      <ExclamationTriangleIcon className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/alert-dialog-demo.tsx b/apps/www/__registry__/new-york/component/alert-dialog-demo.tsx
new file mode 100644
index 0000000000..2d2865ae98
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/new-york/ui/alert-dialog"
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/aspect-ratio-demo.tsx b/apps/www/__registry__/new-york/component/aspect-ratio-demo.tsx
new file mode 100644
index 0000000000..2a06afa35b
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from "next/image"
+
+import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio"
+
+export default function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted">
+      <Image
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="Photo by Drew Beamer"
+        fill
+        className="rounded-md object-cover"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/avatar-demo.tsx b/apps/www/__registry__/new-york/component/avatar-demo.tsx
new file mode 100644
index 0000000000..0dadb8bb24
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/avatar-demo.tsx
@@ -0,0 +1,14 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+
+export default function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/badge-demo.tsx b/apps/www/__registry__/new-york/component/badge-demo.tsx
new file mode 100644
index 0000000000..9695cb96ff
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export default function BadgeDemo() {
+  return <Badge>Badge</Badge>
+}
diff --git a/apps/www/__registry__/new-york/component/badge-destructive.tsx b/apps/www/__registry__/new-york/component/badge-destructive.tsx
new file mode 100644
index 0000000000..233729b18a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export default function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/www/__registry__/new-york/component/badge-outline.tsx b/apps/www/__registry__/new-york/component/badge-outline.tsx
new file mode 100644
index 0000000000..3a00a2f603
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export default function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/www/__registry__/new-york/component/badge-secondary.tsx b/apps/www/__registry__/new-york/component/badge-secondary.tsx
new file mode 100644
index 0000000000..8d2769c3d6
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from "@/registry/new-york/ui/badge"
+
+export default function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/www/__registry__/new-york/component/breadcrumb-demo.tsx b/apps/www/__registry__/new-york/component/breadcrumb-demo.tsx
new file mode 100644
index 0000000000..625e1a6795
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/breadcrumb-demo.tsx
@@ -0,0 +1,49 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export default function BreadcrumbDemo() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              <BreadcrumbEllipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/breadcrumb-dropdown.tsx b/apps/www/__registry__/new-york/component/breadcrumb-dropdown.tsx
new file mode 100644
index 0000000000..e1114e8370
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/breadcrumb-dropdown.tsx
@@ -0,0 +1,50 @@
+import { ChevronDownIcon, SlashIcon } from "@radix-ui/react-icons"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export default function BreadcrumbWithDropdown() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1">
+              Components
+              <ChevronDownIcon />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/breadcrumb-ellipsis.tsx b/apps/www/__registry__/new-york/component/breadcrumb-ellipsis.tsx
new file mode 100644
index 0000000000..c6c974bb5b
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/breadcrumb-ellipsis.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link"
+
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+
+export default function BreadcrumbCollapsed() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/docs/components">Components</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/breadcrumb-link.tsx b/apps/www/__registry__/new-york/component/breadcrumb-link.tsx
new file mode 100644
index 0000000000..6b1b0444d0
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/breadcrumb-link.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink>
+            <Link href="/components">Components</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/breadcrumb-responsive.tsx b/apps/www/__registry__/new-york/component/breadcrumb-responsive.tsx
new file mode 100644
index 0000000000..7388d6aa73
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/breadcrumb-responsive.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+const items = [
+  { href: "#", label: "Home" },
+  { href: "#", label: "Documentation" },
+  { href: "#", label: "Building Your Application" },
+  { href: "#", label: "Data Fetching" },
+  { label: "Caching and Revalidating" },
+]
+
+const ITEMS_TO_DISPLAY = 3
+
+export default function BreadcrumbResponsive() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        {items.length > ITEMS_TO_DISPLAY ? (
+          <>
+            <BreadcrumbItem>
+              {isDesktop ? (
+                <DropdownMenu open={open} onOpenChange={setOpen}>
+                  <DropdownMenuTrigger
+                    className="flex items-center gap-1"
+                    aria-label="Toggle menu"
+                  >
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {items.slice(1, -2).map((item, index) => (
+                      <DropdownMenuItem key={index}>
+                        <Link href={item.href ? item.href : "#"}>
+                          {item.label}
+                        </Link>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ) : (
+                <Drawer open={open} onOpenChange={setOpen}>
+                  <DrawerTrigger aria-label="Toggle Menu">
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                  </DrawerTrigger>
+                  <DrawerContent>
+                    <DrawerHeader className="text-left">
+                      <DrawerTitle>Navigate to</DrawerTitle>
+                      <DrawerDescription>
+                        Select a page to navigate to.
+                      </DrawerDescription>
+                    </DrawerHeader>
+                    <div className="grid gap-1 px-4">
+                      {items.slice(1, -2).map((item, index) => (
+                        <Link
+                          key={index}
+                          href={item.href ? item.href : "#"}
+                          className="py-1 text-sm"
+                        >
+                          {item.label}
+                        </Link>
+                      ))}
+                    </div>
+                    <DrawerFooter className="pt-4">
+                      <DrawerClose asChild>
+                        <Button variant="outline">Close</Button>
+                      </DrawerClose>
+                    </DrawerFooter>
+                  </DrawerContent>
+                </Drawer>
+              )}
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+          </>
+        ) : null}
+        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
+          <BreadcrumbItem key={index}>
+            {item.href ? (
+              <>
+                <BreadcrumbLink
+                  asChild
+                  className="max-w-20 truncate md:max-w-none"
+                >
+                  <Link href={item.href}>{item.label}</Link>
+                </BreadcrumbLink>
+                <BreadcrumbSeparator />
+              </>
+            ) : (
+              <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                {item.label}
+              </BreadcrumbPage>
+            )}
+          </BreadcrumbItem>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/breadcrumb-separator.tsx b/apps/www/__registry__/new-york/component/breadcrumb-separator.tsx
new file mode 100644
index 0000000000..0e5fcb3dcc
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/breadcrumb-separator.tsx
@@ -0,0 +1,34 @@
+import { SlashIcon } from "@radix-ui/react-icons"
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+
+export default function BreadcrumbWithCustomSeparator() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <SlashIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/button-as-child.tsx b/apps/www/__registry__/new-york/component/button-as-child.tsx
new file mode 100644
index 0000000000..141272fbc9
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-as-child.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonAsChild() {
+  return (
+    <Button asChild>
+      <Link href="/login">Login</Link>
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/button-demo.tsx b/apps/www/__registry__/new-york/component/button-demo.tsx
new file mode 100644
index 0000000000..8ac7edc84d
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonDemo() {
+  return <Button>Button</Button>
+}
diff --git a/apps/www/__registry__/new-york/component/button-destructive.tsx b/apps/www/__registry__/new-york/component/button-destructive.tsx
new file mode 100644
index 0000000000..104c93ee42
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}
diff --git a/apps/www/__registry__/new-york/component/button-ghost.tsx b/apps/www/__registry__/new-york/component/button-ghost.tsx
new file mode 100644
index 0000000000..efe9717b49
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonGhost() {
+  return <Button variant="ghost">Ghost</Button>
+}
diff --git a/apps/www/__registry__/new-york/component/button-icon.tsx b/apps/www/__registry__/new-york/component/button-icon.tsx
new file mode 100644
index 0000000000..1478a4830f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-icon.tsx
@@ -0,0 +1,11 @@
+import { ChevronRightIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonIcon() {
+  return (
+    <Button variant="outline" size="icon">
+      <ChevronRightIcon className="h-4 w-4" />
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/button-link.tsx b/apps/www/__registry__/new-york/component/button-link.tsx
new file mode 100644
index 0000000000..bc234677a4
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonLink() {
+  return <Button variant="link">Link</Button>
+}
diff --git a/apps/www/__registry__/new-york/component/button-loading.tsx b/apps/www/__registry__/new-york/component/button-loading.tsx
new file mode 100644
index 0000000000..df0ca032d4
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-loading.tsx
@@ -0,0 +1,12 @@
+import { ReloadIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonLoading() {
+  return (
+    <Button disabled>
+      <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/button-outline.tsx b/apps/www/__registry__/new-york/component/button-outline.tsx
new file mode 100644
index 0000000000..43499699a4
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonOutline() {
+  return <Button variant="outline">Outline</Button>
+}
diff --git a/apps/www/__registry__/new-york/component/button-secondary.tsx b/apps/www/__registry__/new-york/component/button-secondary.tsx
new file mode 100644
index 0000000000..ef2204d5a8
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}
diff --git a/apps/www/__registry__/new-york/component/button-with-icon.tsx b/apps/www/__registry__/new-york/component/button-with-icon.tsx
new file mode 100644
index 0000000000..df78483b5f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/button-with-icon.tsx
@@ -0,0 +1,11 @@
+import { EnvelopeOpenIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function ButtonWithIcon() {
+  return (
+    <Button>
+      <EnvelopeOpenIcon className="mr-2 h-4 w-4" /> Login with Email
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/calendar-demo.tsx b/apps/www/__registry__/new-york/component/calendar-demo.tsx
new file mode 100644
index 0000000000..1478580012
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/calendar-demo.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+
+export default function CalendarDemo() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border shadow"
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/calendar-form.tsx b/apps/www/__registry__/new-york/component/calendar-form.tsx
new file mode 100644
index 0000000000..5e39667f5c
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/calendar-form.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+
+export default function CalendarForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/card-demo.tsx b/apps/www/__registry__/new-york/component/card-demo.tsx
new file mode 100644
index 0000000000..1c3f8b1737
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/card-demo.tsx
@@ -0,0 +1,78 @@
+import { BellIcon, CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+const notifications = [
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+]
+
+type CardProps = React.ComponentProps<typeof Card>
+
+export default function CardDemo({ className, ...props }: CardProps) {
+  return (
+    <Card className={cn("w-[380px]", className)} {...props}>
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className=" flex items-center space-x-4 rounded-md border p-4">
+          <BellIcon />
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-medium leading-none">
+              Push Notifications
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch />
+        </div>
+        <div>
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+            >
+              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium leading-none">
+                  {notification.title}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {notification.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">
+          <CheckIcon className="mr-2 h-4 w-4" /> Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/card-with-form.tsx b/apps/www/__registry__/new-york/component/card-with-form.tsx
new file mode 100644
index 0000000000..dd77e26445
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/card-with-form.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function CardWithForm() {
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="framework">Framework</Label>
+              <Select>
+                <SelectTrigger id="framework">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent position="popper">
+                  <SelectItem value="next">Next.js</SelectItem>
+                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                  <SelectItem value="astro">Astro</SelectItem>
+                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/carousel-api.tsx b/apps/www/__registry__/new-york/component/carousel-api.tsx
new file mode 100644
index 0000000000..5e4cfc073d
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/carousel-api.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/registry/new-york/ui/carousel"
+
+export default function CarouselDApiDemo() {
+  const [api, setApi] = React.useState<CarouselApi>()
+  const [current, setCurrent] = React.useState(0)
+  const [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    setCount(api.scrollSnapList().length)
+    setCurrent(api.selectedScrollSnap() + 1)
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1)
+    })
+  }, [api])
+
+  return (
+    <div>
+      <Carousel setApi={setApi} className="w-full max-w-xs">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <div className="py-2 text-center text-sm text-muted-foreground">
+        Slide {current} of {count}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/carousel-demo.tsx b/apps/www/__registry__/new-york/component/carousel-demo.tsx
new file mode 100644
index 0000000000..bd038934c1
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/carousel-demo.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york/ui/carousel"
+
+export default function CarouselDemo() {
+  return (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/carousel-orientation.tsx b/apps/www/__registry__/new-york/component/carousel-orientation.tsx
new file mode 100644
index 0000000000..33d8981777
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/carousel-orientation.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york/ui/carousel"
+
+export default function CarouselOrientation() {
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      orientation="vertical"
+      className="w-full max-w-xs"
+    >
+      <CarouselContent className="-mt-1 h-[200px]">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pt-1 md:basis-1/2">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/carousel-plugin.tsx b/apps/www/__registry__/new-york/component/carousel-plugin.tsx
new file mode 100644
index 0000000000..abf5b37dc5
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/carousel-plugin.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import Autoplay from "embla-carousel-autoplay"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york/ui/carousel"
+
+export default function CarouselPlugin() {
+  const plugin = React.useRef(
+    Autoplay({ delay: 2000, stopOnInteraction: true })
+  )
+
+  return (
+    <Carousel
+      plugins={[plugin.current]}
+      className="w-full max-w-xs"
+      onMouseEnter={plugin.current.stop}
+      onMouseLeave={plugin.current.reset}
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/carousel-size.tsx b/apps/www/__registry__/new-york/component/carousel-size.tsx
new file mode 100644
index 0000000000..1d33b3565a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/carousel-size.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york/ui/carousel"
+
+export default function CarouselSize() {
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      className="w-full max-w-sm"
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/carousel-spacing.tsx b/apps/www/__registry__/new-york/component/carousel-spacing.tsx
new file mode 100644
index 0000000000..c0a74cd1ce
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/carousel-spacing.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/new-york/ui/carousel"
+
+export default function CarouselSpacing() {
+  return (
+    <Carousel className="w-full max-w-sm">
+      <CarouselContent className="-ml-1">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-2xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/chart-bar-demo-axis.tsx b/apps/www/__registry__/new-york/component/chart-bar-demo-axis.tsx
new file mode 100644
index 0000000000..a1c41ccb04
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/chart-bar-demo-axis.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/chart-bar-demo-grid.tsx b/apps/www/__registry__/new-york/component/chart-bar-demo-grid.tsx
new file mode 100644
index 0000000000..b2c7795d9c
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/chart-bar-demo-grid.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid } from "recharts"
+
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/chart-bar-demo-legend.tsx b/apps/www/__registry__/new-york/component/chart-bar-demo-legend.tsx
new file mode 100644
index 0000000000..5f6c1269d5
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/chart-bar-demo-legend.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/chart-bar-demo-tooltip.tsx b/apps/www/__registry__/new-york/component/chart-bar-demo-tooltip.tsx
new file mode 100644
index 0000000000..87fc8a4171
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/chart-bar-demo-tooltip.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/registry/new-york/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          tickMargin={10}
+          axisLine={false}
+          tickFormatter={(value) => value.slice(0, 3)}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/chart-bar-demo.tsx b/apps/www/__registry__/new-york/component/chart-bar-demo.tsx
new file mode 100644
index 0000000000..251556b480
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/chart-bar-demo.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { Bar, BarChart } from "recharts"
+
+import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "#2563eb",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#60a5fa",
+  },
+} satisfies ChartConfig
+
+export default function Component() {
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart accessibilityLayer data={chartData}>
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/chart-tooltip-demo.tsx b/apps/www/__registry__/new-york/component/chart-tooltip-demo.tsx
new file mode 100644
index 0000000000..2830a8c867
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/chart-tooltip-demo.tsx
@@ -0,0 +1,218 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export default function Component() {
+  return (
+    <div className="grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
+      <div>
+        <div className="absolute left-[-35px] top-[45px] z-10 text-sm font-medium">
+          Label
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 193 40"
+          width="50"
+          height="12"
+          fill="none"
+          className="absolute left-[5px] top-[50px] z-10"
+        >
+          <g clip-path="url(#a)">
+            <path
+              fill="currentColor"
+              d="M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z"
+            />
+          </g>
+          <defs>
+            <clipPath id="a">
+              <path fill="currentColor" d="M0 0h193v40H0z" />
+            </clipPath>
+          </defs>
+        </svg>
+        <TooltipDemo
+          label="Page Views"
+          payload={[
+            { name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
+            { name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
+          ]}
+          className="w-[8rem]"
+        />
+      </div>
+      <div className="items-end">
+        <div className="absolute left-[122px] top-[0px] z-10 text-sm font-medium">
+          Name
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="35"
+          height="42"
+          fill="none"
+          viewBox="0 0 122 148"
+          className="absolute left-[85px] top-[10px] z-10 -scale-x-100"
+        >
+          <g clip-path="url(#ab)">
+            <path
+              fill="currentColor"
+              d="M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z"
+            />
+          </g>
+          <defs>
+            <clipPath id="ab">
+              <path fill="currentColor" d="M0 0h122v148H0z" />
+            </clipPath>
+          </defs>
+        </svg>
+        <TooltipDemo
+          label="Browser"
+          hideLabel
+          payload={[
+            { name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
+            { name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
+          ]}
+          indicator="dashed"
+          className="w-[8rem]"
+        />
+      </div>
+      <div className="!hidden md:!flex">
+        <TooltipDemo
+          label="Page Views"
+          payload={[
+            { name: "Desktop", value: 12486, fill: "hsl(var(--chart-3))" },
+          ]}
+          className="w-[9rem]"
+          indicator="line"
+        />
+      </div>
+      <div className="!items-start !justify-start">
+        <div className="absolute left-[50px] top-[60px] z-10 text-sm font-medium">
+          Indicator
+        </div>
+        <TooltipDemo
+          label="Browser"
+          hideLabel
+          payload={[
+            { name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
+          ]}
+          indicator="dot"
+          className="w-[8rem]"
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="15"
+          height="34"
+          fill="none"
+          viewBox="0 0 75 175"
+          className="absolute left-[30px] top-[38px] z-10 rotate-[-40deg]"
+        >
+          <g clip-path="url(#abc)">
+            <path
+              fill="currentColor"
+              d="M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z"
+            />
+          </g>
+          <defs>
+            <clipPath id="abc">
+              <path fill="currentColor" d="M0 0h75v175H0z" />
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+function TooltipDemo({
+  indicator = "dot",
+  label,
+  payload,
+  hideLabel,
+  hideIndicator,
+  className,
+}: {
+  label: string
+  hideLabel?: boolean
+  hideIndicator?: boolean
+  indicator?: "line" | "dot" | "dashed"
+  payload: {
+    name: string
+    value: number
+    fill: string
+  }[]
+  nameKey?: string
+  labelKey?: string
+} & React.ComponentProps<"div">) {
+  const tooltipLabel = hideLabel ? null : (
+    <div className="font-medium">{label}</div>
+  )
+
+  if (!payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const indicatorColor = item.fill
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                indicator === "dot" && "items-center"
+              )}
+            >
+              <>
+                {!hideIndicator && (
+                  <div
+                    className={cn(
+                      "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent":
+                          indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed",
+                      }
+                    )}
+                    style={
+                      {
+                        "--color-bg": indicatorColor,
+                        "--color-border": indicatorColor,
+                      } as React.CSSProperties
+                    }
+                  />
+                )}
+                <div
+                  className={cn(
+                    "flex flex-1 justify-between leading-none",
+                    nestLabel ? "items-end" : "items-center"
+                  )}
+                >
+                  <div className="grid gap-1.5">
+                    {nestLabel ? tooltipLabel : null}
+                    <span className="text-muted-foreground">{item.name}</span>
+                  </div>
+                  <span className="font-mono font-medium tabular-nums text-foreground">
+                    {item.value.toLocaleString()}
+                  </span>
+                </div>
+              </>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/checkbox-demo.tsx b/apps/www/__registry__/new-york/component/checkbox-demo.tsx
new file mode 100644
index 0000000000..6ce335f439
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+
+export default function CheckboxDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/checkbox-disabled.tsx b/apps/www/__registry__/new-york/component/checkbox-disabled.tsx
new file mode 100644
index 0000000000..46976d3ae9
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/checkbox-disabled.tsx
@@ -0,0 +1,15 @@
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+
+export default function CheckboxDisabled() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms2" disabled />
+      <label
+        htmlFor="terms2"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/checkbox-form-multiple.tsx b/apps/www/__registry__/new-york/component/checkbox-form-multiple.tsx
new file mode 100644
index 0000000000..d56a5ece54
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/checkbox-form-multiple.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const items = [
+  {
+    id: "recents",
+    label: "Recents",
+  },
+  {
+    id: "home",
+    label: "Home",
+  },
+  {
+    id: "applications",
+    label: "Applications",
+  },
+  {
+    id: "desktop",
+    label: "Desktop",
+  },
+  {
+    id: "downloads",
+    label: "Downloads",
+  },
+  {
+    id: "documents",
+    label: "Documents",
+  },
+] as const
+
+const FormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "You have to select at least one item.",
+  }),
+})
+
+export default function CheckboxReactHookFormMultiple() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      items: ["recents", "home"],
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="items"
+          render={() => (
+            <FormItem>
+              <div className="mb-4">
+                <FormLabel className="text-base">Sidebar</FormLabel>
+                <FormDescription>
+                  Select the items you want to display in the sidebar.
+                </FormDescription>
+              </div>
+              {items.map((item) => (
+                <FormField
+                  key={item.id}
+                  control={form.control}
+                  name="items"
+                  render={({ field }) => {
+                    return (
+                      <FormItem
+                        key={item.id}
+                        className="flex flex-row items-start space-x-3 space-y-0"
+                      >
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value?.includes(item.id)}
+                            onCheckedChange={(checked) => {
+                              return checked
+                                ? field.onChange([...field.value, item.id])
+                                : field.onChange(
+                                    field.value?.filter(
+                                      (value) => value !== item.id
+                                    )
+                                  )
+                            }}
+                          />
+                        </FormControl>
+                        <FormLabel className="text-sm font-normal">
+                          {item.label}
+                        </FormLabel>
+                      </FormItem>
+                    )
+                  }}
+                />
+              ))}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/checkbox-form-single.tsx b/apps/www/__registry__/new-york/component/checkbox-form-single.tsx
new file mode 100644
index 0000000000..886d3600c9
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/checkbox-form-single.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/registry/new-york/ui/form"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      mobile: true,
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="mobile"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel>
+                  Use different settings for my mobile devices
+                </FormLabel>
+                <FormDescription>
+                  You can manage your mobile notifications in the{" "}
+                  <Link href="/examples/forms">mobile settings</Link> page.
+                </FormDescription>
+              </div>
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/checkbox-with-text.tsx b/apps/www/__registry__/new-york/component/checkbox-with-text.tsx
new file mode 100644
index 0000000000..1d62119009
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+
+export default function CheckboxWithText() {
+  return (
+    <div className="items-top flex space-x-2">
+      <Checkbox id="terms1" />
+      <div className="grid gap-1.5 leading-none">
+        <label
+          htmlFor="terms1"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Accept terms and conditions
+        </label>
+        <p className="text-sm text-muted-foreground">
+          You agree to our Terms of Service and Privacy Policy.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/collapsible-demo.tsx b/apps/www/__registry__/new-york/component/collapsible-demo.tsx
new file mode 100644
index 0000000000..b1210ea41c
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/collapsible-demo.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { CaretSortIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/new-york/ui/collapsible"
+
+export default function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="w-[350px] space-y-2"
+    >
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <CaretSortIcon className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        @radix-ui/primitives
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @radix-ui/colors
+        </div>
+        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+          @stitches/react
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/combobox-demo.tsx b/apps/www/__registry__/new-york/component/combobox-demo.tsx
new file mode 100644
index 0000000000..86ca85984c
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/combobox-demo.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export default function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  {framework.label}
+                  <CheckIcon
+                    className={cn(
+                      "ml-auto h-4 w-4",
+                      value === framework.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/combobox-dropdown-menu.tsx b/apps/www/__registry__/new-york/component/combobox-dropdown-menu.tsx
new file mode 100644
index 0000000000..c27d219e92
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/combobox-dropdown-menu.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from "react"
+import { DotsHorizontalIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+const labels = [
+  "feature",
+  "bug",
+  "enhancement",
+  "documentation",
+  "design",
+  "question",
+  "maintenance",
+]
+
+export default function ComboboxDropdownMenu() {
+  const [label, setLabel] = React.useState("feature")
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+      <p className="text-sm font-medium leading-none">
+        <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+          {label}
+        </span>
+        <span className="text-muted-foreground">Create a new project</span>
+      </p>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <DotsHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[200px]">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>Assign to...</DropdownMenuItem>
+            <DropdownMenuItem>Set due date...</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="p-0">
+                <Command>
+                  <CommandInput
+                    placeholder="Filter label..."
+                    autoFocus={true}
+                    className="h-9"
+                  />
+                  <CommandList>
+                    <CommandEmpty>No label found.</CommandEmpty>
+                    <CommandGroup>
+                      {labels.map((label) => (
+                        <CommandItem
+                          key={label}
+                          value={label}
+                          onSelect={(value) => {
+                            setLabel(value)
+                            setOpen(false)
+                          }}
+                        >
+                          {label}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-red-600">
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/combobox-form.tsx b/apps/www/__registry__/new-york/component/combobox-form.tsx
new file mode 100644
index 0000000000..d4cd293e46
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/combobox-form.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const languages = [
+  { label: "English", value: "en" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Spanish", value: "es" },
+  { label: "Portuguese", value: "pt" },
+  { label: "Russian", value: "ru" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Chinese", value: "zh" },
+] as const
+
+const FormSchema = z.object({
+  language: z.string({
+    required_error: "Please select a language.",
+  }),
+})
+
+export default function ComboboxForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Language</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-[200px] justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? languages.find(
+                            (language) => language.value === field.value
+                          )?.label
+                        : "Select language"}
+                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[200px] p-0">
+                  <Command>
+                    <CommandInput
+                      placeholder="Search framework..."
+                      className="h-9"
+                    />
+                    <CommandList>
+                      <CommandEmpty>No framework found.</CommandEmpty>
+                      <CommandGroup>
+                        {languages.map((language) => (
+                          <CommandItem
+                            value={language.label}
+                            key={language.value}
+                            onSelect={() => {
+                              form.setValue("language", language.value)
+                            }}
+                          >
+                            {language.label}
+                            <CheckIcon
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                language.value === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                This is the language that will be used in the dashboard.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/combobox-popover.tsx b/apps/www/__registry__/new-york/component/combobox-popover.tsx
new file mode 100644
index 0000000000..adfe49e44e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/combobox-popover.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+type Status = {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: "backlog",
+    label: "Backlog",
+  },
+  {
+    value: "todo",
+    label: "Todo",
+  },
+  {
+    value: "in progress",
+    label: "In Progress",
+  },
+  {
+    value: "done",
+    label: "Done",
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+  },
+]
+
+export default function ComboboxPopover() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+    null
+  )
+
+  return (
+    <div className="flex items-center space-x-4">
+      <p className="text-sm text-muted-foreground">Status</p>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="w-[150px] justify-start">
+            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" side="right" align="start">
+          <Command>
+            <CommandInput placeholder="Change status..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {statuses.map((status) => (
+                  <CommandItem
+                    key={status.value}
+                    value={status.value}
+                    onSelect={(value) => {
+                      setSelectedStatus(
+                        statuses.find((priority) => priority.value === value) ||
+                          null
+                      )
+                      setOpen(false)
+                    }}
+                  >
+                    {status.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/combobox-responsive.tsx b/apps/www/__registry__/new-york/component/combobox-responsive.tsx
new file mode 100644
index 0000000000..de4c091d0d
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/combobox-responsive.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import * as React from "react"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+type Status = {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: "backlog",
+    label: "Backlog",
+  },
+  {
+    value: "todo",
+    label: "Todo",
+  },
+  {
+    value: "in progress",
+    label: "In Progress",
+  },
+  {
+    value: "done",
+    label: "Done",
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+  },
+]
+
+export default function ComboBoxResponsive() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
+    null
+  )
+
+  if (isDesktop) {
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="w-[150px] justify-start">
+            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0" align="start">
+          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button variant="outline" className="w-[150px] justify-start">
+          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mt-4 border-t">
+          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function StatusList({
+  setOpen,
+  setSelectedStatus,
+}: {
+  setOpen: (open: boolean) => void
+  setSelectedStatus: (status: Status | null) => void
+}) {
+  return (
+    <Command>
+      <CommandInput placeholder="Filter status..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup>
+          {statuses.map((status) => (
+            <CommandItem
+              key={status.value}
+              value={status.value}
+              onSelect={(value) => {
+                setSelectedStatus(
+                  statuses.find((priority) => priority.value === value) || null
+                )
+                setOpen(false)
+              }}
+            >
+              {status.label}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/command-demo.tsx b/apps/www/__registry__/new-york/component/command-demo.tsx
new file mode 100644
index 0000000000..efc5d6e75a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/command-demo.tsx
@@ -0,0 +1,62 @@
+import {
+  CalendarIcon,
+  EnvelopeClosedIcon,
+  FaceIcon,
+  GearIcon,
+  PersonIcon,
+  RocketIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york/ui/command"
+
+export default function CommandDemo() {
+  return (
+    <Command className="rounded-lg border shadow-md">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <FaceIcon className="mr-2 h-4 w-4" />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem disabled>
+            <RocketIcon className="mr-2 h-4 w-4" />
+            <span>Launch</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <PersonIcon className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
+            <span>Mail</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <GearIcon className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/command-dialog.tsx b/apps/www/__registry__/new-york/component/command-dialog.tsx
new file mode 100644
index 0000000000..a40ff3cb9c
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/command-dialog.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import {
+  CalendarIcon,
+  EnvelopeClosedIcon,
+  FaceIcon,
+  GearIcon,
+  PersonIcon,
+  RocketIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/registry/new-york/ui/command"
+
+export default function CommandDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
+
+  return (
+    <>
+      <p className="text-sm text-muted-foreground">
+        Press{" "}
+        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+          <span className="text-xs">⌘</span>J
+        </kbd>
+      </p>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              <span>Calendar</span>
+            </CommandItem>
+            <CommandItem>
+              <FaceIcon className="mr-2 h-4 w-4" />
+              <span>Search Emoji</span>
+            </CommandItem>
+            <CommandItem>
+              <RocketIcon className="mr-2 h-4 w-4" />
+              <span>Launch</span>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Settings">
+            <CommandItem>
+              <PersonIcon className="mr-2 h-4 w-4" />
+              <span>Profile</span>
+              <CommandShortcut>⌘P</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
+              <span>Mail</span>
+              <CommandShortcut>⌘B</CommandShortcut>
+            </CommandItem>
+            <CommandItem>
+              <GearIcon className="mr-2 h-4 w-4" />
+              <span>Settings</span>
+              <CommandShortcut>⌘S</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/context-menu-demo.tsx b/apps/www/__registry__/new-york/component/context-menu-demo.tsx
new file mode 100644
index 0000000000..512a3cc634
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/context-menu-demo.tsx
@@ -0,0 +1,67 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/registry/new-york/ui/context-menu"
+
+export default function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        <ContextMenuItem inset>
+          Back
+          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset disabled>
+          Forward
+          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem inset>
+          Reload
+          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-48">
+            <ContextMenuItem>
+              Save Page As...
+              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
+            <ContextMenuItem>Name Window...</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Developer Tools</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuCheckboxItem checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuRadioGroup value="pedro">
+          <ContextMenuLabel inset>People</ContextMenuLabel>
+          <ContextMenuSeparator />
+          <ContextMenuRadioItem value="pedro">
+            Pedro Duarte
+          </ContextMenuRadioItem>
+          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/data-table-demo.tsx b/apps/www/__registry__/new-york/component/data-table-demo.tsx
new file mode 100644
index 0000000000..ddb26e881c
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/data-table-demo.tsx
@@ -0,0 +1,316 @@
+"use client"
+
+import * as React from "react"
+import {
+  CaretSortIcon,
+  ChevronDownIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@yahoo.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@gmail.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@gmail.com",
+  },
+  {
+    id: "5kma53ae",
+    amount: 874,
+    status: "success",
+    email: "Silas22@gmail.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@hotmail.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <CaretSortIcon className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <DotsHorizontalIcon className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export default function DataTableDemo() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/date-picker-demo.tsx b/apps/www/__registry__/new-york/component/date-picker-demo.tsx
new file mode 100644
index 0000000000..50fcc5ba10
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/date-picker-demo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/date-picker-form.tsx b/apps/www/__registry__/new-york/component/date-picker-form.tsx
new file mode 100644
index 0000000000..0b27f9f67e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/date-picker-form.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { format } from "date-fns"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+
+export default function DatePickerForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/date-picker-with-presets.tsx b/apps/www/__registry__/new-york/component/date-picker-with-presets.tsx
new file mode 100644
index 0000000000..6c7078301e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/date-picker-with-presets.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { addDays, format } from "date-fns"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function DatePickerWithPresets() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[240px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="flex w-auto flex-col space-y-2 p-2"
+      >
+        <Select
+          onValueChange={(value) =>
+            setDate(addDays(new Date(), parseInt(value)))
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent position="popper">
+            <SelectItem value="0">Today</SelectItem>
+            <SelectItem value="1">Tomorrow</SelectItem>
+            <SelectItem value="3">In 3 days</SelectItem>
+            <SelectItem value="7">In a week</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="rounded-md border">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/date-picker-with-range.tsx b/apps/www/__registry__/new-york/component/date-picker-with-range.tsx
new file mode 100644
index 0000000000..2d98728847
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/date-picker-with-range.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "@radix-ui/react-icons"
+import { addDays, format } from "date-fns"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function DatePickerWithRange({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/dialog-close-button.tsx b/apps/www/__registry__/new-york/component/dialog-close-button.tsx
new file mode 100644
index 0000000000..5724000f99
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/dialog-close-button.tsx
@@ -0,0 +1,56 @@
+import { CopyIcon } from "@radix-ui/react-icons"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function DialogCloseButton() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Share</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link</DialogTitle>
+          <DialogDescription>
+            Anyone who has this link will be able to view this.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="link" className="sr-only">
+              Link
+            </Label>
+            <Input
+              id="link"
+              defaultValue="https://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <CopyIcon className="h-4 w-4" />
+          </Button>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/dialog-demo.tsx b/apps/www/__registry__/new-york/component/dialog-demo.tsx
new file mode 100644
index 0000000000..e13e84d06a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/dialog-demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/drawer-demo.tsx b/apps/www/__registry__/new-york/component/drawer-demo.tsx
new file mode 100644
index 0000000000..14a0c00384
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/drawer-demo.tsx
@@ -0,0 +1,134 @@
+import * as React from "react"
+import { MinusIcon, PlusIcon } from "@radix-ui/react-icons"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export default function DrawerDemo() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <MinusIcon className="h-4 w-4" />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">
+                  {goal}
+                </div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">
+                  Calories/day
+                </div>
+              </div>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <PlusIcon className="h-4 w-4" />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: "hsl(var(--foreground))",
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/drawer-dialog.tsx b/apps/www/__registry__/new-york/component/drawer-dialog.tsx
new file mode 100644
index 0000000000..cbaeb1ebc6
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/drawer-dialog.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useMediaQuery } from "@/hooks/use-media-query"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function DrawerDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="outline">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you're done.
+            </DialogDescription>
+          </DialogHeader>
+          <ProfileForm />
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Edit profile</DrawerTitle>
+          <DrawerDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DrawerDescription>
+        </DrawerHeader>
+        <ProfileForm className="px-4" />
+        <DrawerFooter className="pt-2">
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function ProfileForm({ className }: React.ComponentProps<"form">) {
+  return (
+    <form className={cn("grid items-start gap-4", className)}>
+      <div className="grid gap-2">
+        <Label htmlFor="email">Email</Label>
+        <Input type="email" id="email" defaultValue="shadcn@example.com" />
+      </div>
+      <div className="grid gap-2">
+        <Label htmlFor="username">Username</Label>
+        <Input id="username" defaultValue="@shadcn" />
+      </div>
+      <Button type="submit">Save changes</Button>
+    </form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/dropdown-menu-checkboxes.tsx b/apps/www/__registry__/new-york/component/dropdown-menu-checkboxes.tsx
new file mode 100644
index 0000000000..b7c38dea25
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/dropdown-menu-checkboxes.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+type Checked = DropdownMenuCheckboxItemProps["checked"]
+
+export default function DropdownMenuCheckboxes() {
+  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
+  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
+  const [showPanel, setShowPanel] = React.useState<Checked>(false)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={showStatusBar}
+          onCheckedChange={setShowStatusBar}
+        >
+          Status Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showActivityBar}
+          onCheckedChange={setShowActivityBar}
+          disabled
+        >
+          Activity Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showPanel}
+          onCheckedChange={setShowPanel}
+        >
+          Panel
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/dropdown-menu-demo.tsx b/apps/www/__registry__/new-york/component/dropdown-menu-demo.tsx
new file mode 100644
index 0000000000..568104cc0f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/dropdown-menu-demo.tsx
@@ -0,0 +1,75 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export default function DropdownMenuDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Email</DropdownMenuItem>
+                <DropdownMenuItem>Message</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>More...</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuItem disabled>API</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/dropdown-menu-radio-group.tsx b/apps/www/__registry__/new-york/component/dropdown-menu-radio-group.tsx
new file mode 100644
index 0000000000..ea767f5a7a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/dropdown-menu-radio-group.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export default function DropdownMenuRadioGroupDemo() {
+  const [position, setPosition] = React.useState("bottom")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/registry/new-york/block/hello-block.tsx b/apps/www/__registry__/new-york/component/hello-block.tsx
similarity index 100%
rename from apps/www/registry/new-york/block/hello-block.tsx
rename to apps/www/__registry__/new-york/component/hello-block.tsx
diff --git a/apps/www/__registry__/new-york/component/hover-card-demo.tsx b/apps/www/__registry__/new-york/component/hover-card-demo.tsx
new file mode 100644
index 0000000000..16e0750ee7
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/hover-card-demo.tsx
@@ -0,0 +1,43 @@
+import { CalendarIcon } from "@radix-ui/react-icons"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/registry/new-york/ui/hover-card"
+
+export default function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-demo.tsx b/apps/www/__registry__/new-york/component/input-demo.tsx
new file mode 100644
index 0000000000..6b761a6e0f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/new-york/ui/input"
+
+export default function InputDemo() {
+  return <Input type="email" placeholder="Email" />
+}
diff --git a/apps/www/__registry__/new-york/component/input-disabled.tsx b/apps/www/__registry__/new-york/component/input-disabled.tsx
new file mode 100644
index 0000000000..5a4336dc2f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-disabled.tsx
@@ -0,0 +1,5 @@
+import { Input } from "@/registry/new-york/ui/input"
+
+export default function InputDisabled() {
+  return <Input disabled type="email" placeholder="Email" />
+}
diff --git a/apps/www/__registry__/new-york/component/input-file.tsx b/apps/www/__registry__/new-york/component/input-file.tsx
new file mode 100644
index 0000000000..ae3bccc6d0
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-file.tsx
@@ -0,0 +1,11 @@
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function InputFile() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="picture">Picture</Label>
+      <Input id="picture" type="file" />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-form.tsx b/apps/www/__registry__/new-york/component/input-form.tsx
new file mode 100644
index 0000000000..a3df4bb38a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-form.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import { Input } from "@/registry/new-york/ui/input"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters.",
+  }),
+})
+
+export default function InputForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      username: "",
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-otp-controlled.tsx b/apps/www/__registry__/new-york/component/input-otp-controlled.tsx
new file mode 100644
index 0000000000..9b4eb7330f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-otp-controlled.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/new-york/ui/input-otp"
+
+export default function InputOTPControlled() {
+  const [value, setValue] = React.useState("")
+
+  return (
+    <div className="space-y-2">
+      <InputOTP
+        maxLength={6}
+        value={value}
+        onChange={(value) => setValue(value)}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+      <div className="text-center text-sm">
+        {value === "" ? (
+          <>Enter your one-time password.</>
+        ) : (
+          <>You entered: {value}</>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-otp-demo.tsx b/apps/www/__registry__/new-york/component/input-otp-demo.tsx
new file mode 100644
index 0000000000..bc63ca1c16
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-otp-demo.tsx
@@ -0,0 +1,24 @@
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/new-york/ui/input-otp"
+
+export default function InputOTPDemo() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-otp-form.tsx b/apps/www/__registry__/new-york/component/input-otp-form.tsx
new file mode 100644
index 0000000000..2ab26e4739
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-otp-form.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/new-york/ui/input-otp"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  pin: z.string().min(6, {
+    message: "Your one-time password must be 6 characters.",
+  }),
+})
+
+export default function InputOTPForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      pin: "",
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="pin"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>One-Time Password</FormLabel>
+              <FormControl>
+                <InputOTP maxLength={6} {...field}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormControl>
+              <FormDescription>
+                Please enter the one-time password sent to your phone.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-otp-pattern.tsx b/apps/www/__registry__/new-york/component/input-otp-pattern.tsx
new file mode 100644
index 0000000000..9dc46cab92
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-otp-pattern.tsx
@@ -0,0 +1,22 @@
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "@/registry/new-york/ui/input-otp"
+
+export default function InputOTPPattern() {
+  return (
+    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-otp-separator.tsx b/apps/www/__registry__/new-york/component/input-otp-separator.tsx
new file mode 100644
index 0000000000..dd65296635
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-otp-separator.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/registry/new-york/ui/input-otp"
+
+export default function InputOTPWithSeparator() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-with-button.tsx b/apps/www/__registry__/new-york/component/input-with-button.tsx
new file mode 100644
index 0000000000..885dbe5776
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+
+export default function InputWithButton() {
+  return (
+    <div className="flex w-full max-w-sm items-center space-x-2">
+      <Input type="email" placeholder="Email" />
+      <Button type="submit">Subscribe</Button>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-with-label.tsx b/apps/www/__registry__/new-york/component/input-with-label.tsx
new file mode 100644
index 0000000000..21f1766b87
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-with-label.tsx
@@ -0,0 +1,11 @@
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function InputWithLabel() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="Email" />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/input-with-text.tsx b/apps/www/__registry__/new-york/component/input-with-text.tsx
new file mode 100644
index 0000000000..50f3bda51f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/input-with-text.tsx
@@ -0,0 +1,12 @@
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function InputWithText() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email-2">Email</Label>
+      <Input type="email" id="email-2" placeholder="Email" />
+      <p className="text-sm text-muted-foreground">Enter your email address.</p>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/label-demo.tsx b/apps/www/__registry__/new-york/component/label-demo.tsx
new file mode 100644
index 0000000000..9b3152bf8e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/label-demo.tsx
@@ -0,0 +1,13 @@
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import { Label } from "@/registry/new-york/ui/label"
+
+export default function LabelDemo() {
+  return (
+    <div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/menubar-demo.tsx b/apps/www/__registry__/new-york/component/menubar-demo.tsx
new file mode 100644
index 0000000000..2fdd1412ee
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/menubar-demo.tsx
@@ -0,0 +1,107 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/registry/new-york/ui/menubar"
+
+export default function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/mode-toggle.tsx b/apps/www/__registry__/new-york/component/mode-toggle.tsx
new file mode 100644
index 0000000000..506a906a91
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/mode-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+
+export default function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/navigation-menu-demo.tsx b/apps/www/__registry__/new-york/component/navigation-menu-demo.tsx
new file mode 100644
index 0000000000..7b25d730cd
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/navigation-menu-demo.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/registry/new-york/ui/navigation-menu"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export default function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <a
+                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                    href="/"
+                  >
+                    <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>
+              <ListItem href="/docs" title="Introduction">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="/docs/installation" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="/docs/primitives/typography" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              {components.map((component) => (
+                <ListItem
+                  key={component.title}
+                  title={component.title}
+                  href={component.href}
+                >
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <Link href="/docs" legacyBehavior passHref>
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              Documentation
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = "ListItem"
diff --git a/apps/www/__registry__/new-york/component/pagination-demo.tsx b/apps/www/__registry__/new-york/component/pagination-demo.tsx
new file mode 100644
index 0000000000..091a845e19
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/pagination-demo.tsx
@@ -0,0 +1,38 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/registry/new-york/ui/pagination"
+
+export default function PaginationDemo() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/popover-demo.tsx b/apps/www/__registry__/new-york/component/popover-demo.tsx
new file mode 100644
index 0000000000..a23c582880
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/popover-demo.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export default function PopoverDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">
+              Set the dimensions for the layer.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input
+                id="width"
+                defaultValue="100%"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxWidth">Max. width</Label>
+              <Input
+                id="maxWidth"
+                defaultValue="300px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input
+                id="height"
+                defaultValue="25px"
+                className="col-span-2 h-8"
+              />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="maxHeight">Max. height</Label>
+              <Input
+                id="maxHeight"
+                defaultValue="none"
+                className="col-span-2 h-8"
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/progress-demo.tsx b/apps/www/__registry__/new-york/component/progress-demo.tsx
new file mode 100644
index 0000000000..9d7f67099b
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/progress-demo.tsx
@@ -0,0 +1,16 @@
+"use client"
+
+import * as React from "react"
+
+import { Progress } from "@/registry/new-york/ui/progress"
+
+export default function ProgressDemo() {
+  const [progress, setProgress] = React.useState(13)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/www/__registry__/new-york/component/radio-group-demo.tsx b/apps/www/__registry__/new-york/component/radio-group-demo.tsx
new file mode 100644
index 0000000000..0e809c798d
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group"
+
+export default function RadioGroupDemo() {
+  return (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/radio-group-form.tsx b/apps/www/__registry__/new-york/component/radio-group-form.tsx
new file mode 100644
index 0000000000..585e21de53
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/radio-group-form.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  type: z.enum(["all", "mentions", "none"], {
+    required_error: "You need to select a notification type.",
+  }),
+})
+
+export default function RadioGroupForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel>Notify me about...</FormLabel>
+              <FormControl>
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="flex flex-col space-y-1"
+                >
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="all" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      All new messages
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="mentions" />
+                    </FormControl>
+                    <FormLabel className="font-normal">
+                      Direct messages and mentions
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem className="flex items-center space-x-3 space-y-0">
+                    <FormControl>
+                      <RadioGroupItem value="none" />
+                    </FormControl>
+                    <FormLabel className="font-normal">Nothing</FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/resizable-demo-with-handle.tsx b/apps/www/__registry__/new-york/component/resizable-demo-with-handle.tsx
new file mode 100644
index 0000000000..855f8af305
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/resizable-demo-with-handle.tsx
@@ -0,0 +1,36 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/resizable-demo.tsx b/apps/www/__registry__/new-york/component/resizable-demo.tsx
new file mode 100644
index 0000000000..d7d339a64a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/resizable-demo.tsx
@@ -0,0 +1,36 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/resizable-handle.tsx b/apps/www/__registry__/new-york/component/resizable-handle.tsx
new file mode 100644
index 0000000000..852f072ac4
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/resizable-handle.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/resizable-vertical.tsx b/apps/www/__registry__/new-york/component/resizable-vertical.tsx
new file mode 100644
index 0000000000..df2a8853c0
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/resizable-vertical.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="vertical"
+      className="min-h-[200px] max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Header</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/scroll-area-demo.tsx b/apps/www/__registry__/new-york/component/scroll-area-demo.tsx
new file mode 100644
index 0000000000..1717ed9061
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/scroll-area-demo.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
+import { Separator } from "@/registry/new-york/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+export default function ScrollAreaDemo() {
+  return (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {tags.map((tag) => (
+          <>
+            <div key={tag} className="text-sm">
+              {tag}
+            </div>
+            <Separator className="my-2" />
+          </>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/scroll-area-horizontal-demo.tsx b/apps/www/__registry__/new-york/component/scroll-area-horizontal-demo.tsx
new file mode 100644
index 0000000000..d837e0a81f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import Image from "next/image"
+
+import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+export const works: Artwork[] = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{" "}
+              <span className="font-semibold text-foreground">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/select-demo.tsx b/apps/www/__registry__/new-york/component/select-demo.tsx
new file mode 100644
index 0000000000..f016ab8863
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function SelectDemo() {
+  return (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/select-form.tsx b/apps/www/__registry__/new-york/component/select-form.tsx
new file mode 100644
index 0000000000..227a32b9c6
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/select-form.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import Link from "next/link"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  email: z
+    .string({
+      required_error: "Please select an email to display.",
+    })
+    .email(),
+})
+
+export default function SelectForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="m@example.com">m@example.com</SelectItem>
+                  <SelectItem value="m@google.com">m@google.com</SelectItem>
+                  <SelectItem value="m@support.com">m@support.com</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                You can manage email addresses in your{" "}
+                <Link href="/examples/forms">email settings</Link>.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/select-scrollable.tsx b/apps/www/__registry__/new-york/component/select-scrollable.tsx
new file mode 100644
index 0000000000..d83d8059c6
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/select-scrollable.tsx
@@ -0,0 +1,75 @@
+import * as React from "react"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export default function SelectScrollable() {
+  return (
+    <Select>
+      <SelectTrigger className="w-[280px]">
+        <SelectValue placeholder="Select a timezone" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>North America</SelectLabel>
+          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+          <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+          <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+          <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Europe & Africa</SelectLabel>
+          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+          <SelectItem value="cet">Central European Time (CET)</SelectItem>
+          <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+          <SelectItem value="west">
+            Western European Summer Time (WEST)
+          </SelectItem>
+          <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+          <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Asia</SelectLabel>
+          <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
+          <SelectItem value="ist">India Standard Time (IST)</SelectItem>
+          <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
+          <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
+          <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
+          <SelectItem value="ist_indonesia">
+            Indonesia Central Standard Time (WITA)
+          </SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Australia & Pacific</SelectLabel>
+          <SelectItem value="awst">
+            Australian Western Standard Time (AWST)
+          </SelectItem>
+          <SelectItem value="acst">
+            Australian Central Standard Time (ACST)
+          </SelectItem>
+          <SelectItem value="aest">
+            Australian Eastern Standard Time (AEST)
+          </SelectItem>
+          <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
+          <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>South America</SelectLabel>
+          <SelectItem value="art">Argentina Time (ART)</SelectItem>
+          <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
+          <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
+          <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/separator-demo.tsx b/apps/www/__registry__/new-york/component/separator-demo.tsx
new file mode 100644
index 0000000000..dc06681ece
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "@/registry/new-york/ui/separator"
+
+export default function SeparatorDemo() {
+  return (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/sheet-demo.tsx b/apps/www/__registry__/new-york/component/sheet-demo.tsx
new file mode 100644
index 0000000000..7d52d96074
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/sheet-demo.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york/ui/sheet"
+
+export default function SheetDemo() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Save changes</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/sheet-side.tsx b/apps/www/__registry__/new-york/component/sheet-side.tsx
new file mode 100644
index 0000000000..b672e1a993
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/sheet-side.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/registry/new-york/ui/sheet"
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+
+type SheetSide = (typeof SHEET_SIDES)[number]
+
+export default function SheetSide() {
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {SHEET_SIDES.map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button variant="outline">{side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>
+                Make changes to your profile here. Click save when you're done.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">
+                  Name
+                </Label>
+                <Input id="name" value="Pedro Duarte" className="col-span-3" />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="username" className="text-right">
+                  Username
+                </Label>
+                <Input id="username" value="@peduarte" className="col-span-3" />
+              </div>
+            </div>
+            <SheetFooter>
+              <SheetClose asChild>
+                <Button type="submit">Save changes</Button>
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/skeleton-card.tsx b/apps/www/__registry__/new-york/component/skeleton-card.tsx
new file mode 100644
index 0000000000..129b1a3428
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/skeleton-card.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/new-york/ui/skeleton"
+
+export default function SkeletonCard() {
+  return (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/skeleton-demo.tsx b/apps/www/__registry__/new-york/component/skeleton-demo.tsx
new file mode 100644
index 0000000000..f4c86fbd21
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/registry/new-york/ui/skeleton"
+
+export default function SkeletonDemo() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/slider-demo.tsx b/apps/www/__registry__/new-york/component/slider-demo.tsx
new file mode 100644
index 0000000000..1c941cc9ce
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils"
+import { Slider } from "@/registry/new-york/ui/slider"
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDemo({ className, ...props }: SliderProps) {
+  return (
+    <Slider
+      defaultValue={[50]}
+      max={100}
+      step={1}
+      className={cn("w-[60%]", className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/sonner-demo.tsx b/apps/www/__registry__/new-york/component/sonner-demo.tsx
new file mode 100644
index 0000000000..f1ff10d705
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/sonner-demo.tsx
@@ -0,0 +1,22 @@
+import { toast } from "sonner"
+
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast("Event has been created", {
+          description: "Sunday, December 03, 2023 at 9:00 AM",
+          action: {
+            label: "Undo",
+            onClick: () => console.log("Undo"),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/switch-demo.tsx b/apps/www/__registry__/new-york/component/switch-demo.tsx
new file mode 100644
index 0000000000..32a83b2cf0
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+export default function SwitchDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/switch-form.tsx b/apps/www/__registry__/new-york/component/switch-form.tsx
new file mode 100644
index 0000000000..ea1f9b9f3c
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/switch-form.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/registry/new-york/ui/form"
+import { Switch } from "@/registry/new-york/ui/switch"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+})
+
+export default function SwitchForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      security_emails: true,
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
+        <div>
+          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="marketing_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                  <div className="space-y-0.5">
+                    <FormLabel>Marketing emails</FormLabel>
+                    <FormDescription>
+                      Receive emails about new products, features, and more.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="security_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                  <div className="space-y-0.5">
+                    <FormLabel>Security emails</FormLabel>
+                    <FormDescription>
+                      Receive emails about your account security.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                      disabled
+                      aria-readonly
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/table-demo.tsx b/apps/www/__registry__/new-york/component/table-demo.tsx
new file mode 100644
index 0000000000..17a5888505
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+]
+
+export default function TableDemo() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/tabs-demo.tsx b/apps/www/__registry__/new-york/component/tabs-demo.tsx
new file mode 100644
index 0000000000..5ba5478d15
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/tabs-demo.tsx
@@ -0,0 +1,74 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york/ui/tabs"
+
+export default function TabsDemo() {
+  return (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>
+              Make changes to your account here. Click save when you're done.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Username</Label>
+              <Input id="username" defaultValue="@peduarte" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save changes</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+      <TabsContent value="password">
+        <Card>
+          <CardHeader>
+            <CardTitle>Password</CardTitle>
+            <CardDescription>
+              Change your password here. After saving, you'll be logged out.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="current">Current password</Label>
+              <Input id="current" type="password" />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="new">New password</Label>
+              <Input id="new" type="password" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save password</Button>
+          </CardFooter>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/textarea-demo.tsx b/apps/www/__registry__/new-york/component/textarea-demo.tsx
new file mode 100644
index 0000000000..83e6b95866
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export default function TextareaDemo() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/www/__registry__/new-york/component/textarea-disabled.tsx b/apps/www/__registry__/new-york/component/textarea-disabled.tsx
new file mode 100644
index 0000000000..489ed7915f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/textarea-disabled.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export default function TextareaDisabled() {
+  return <Textarea placeholder="Type your message here." disabled />
+}
diff --git a/apps/www/__registry__/new-york/component/textarea-form.tsx b/apps/www/__registry__/new-york/component/textarea-form.tsx
new file mode 100644
index 0000000000..3aca0cf452
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/textarea-form.tsx
@@ -0,0 +1,74 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/registry/new-york/ui/form"
+import { Textarea } from "@/registry/new-york/ui/textarea"
+import { toast } from "@/registry/new-york/ui/use-toast"
+
+const FormSchema = z.object({
+  bio: z
+    .string()
+    .min(10, {
+      message: "Bio must be at least 10 characters.",
+    })
+    .max(160, {
+      message: "Bio must not be longer than 30 characters.",
+    }),
+})
+
+export default function TextareaForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Tell us a little bit about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                You can <span>@mention</span> other users and organizations.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/textarea-with-button.tsx b/apps/www/__registry__/new-york/component/textarea-with-button.tsx
new file mode 100644
index 0000000000..7e76c9b543
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/textarea-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from "@/registry/new-york/ui/button"
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export default function TextareaWithButton() {
+  return (
+    <div className="grid w-full gap-2">
+      <Textarea placeholder="Type your message here." />
+      <Button>Send message</Button>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/textarea-with-label.tsx b/apps/www/__registry__/new-york/component/textarea-with-label.tsx
new file mode 100644
index 0000000000..fdf1c4886e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/textarea-with-label.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export default function TextareaWithLabel() {
+  return (
+    <div className="grid w-full gap-1.5">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea placeholder="Type your message here." id="message" />
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/textarea-with-text.tsx b/apps/www/__registry__/new-york/component/textarea-with-text.tsx
new file mode 100644
index 0000000000..d348bcbb9e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/textarea-with-text.tsx
@@ -0,0 +1,14 @@
+import { Label } from "@/registry/new-york/ui/label"
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export default function TextareaWithText() {
+  return (
+    <div className="grid w-full gap-1.5">
+      <Label htmlFor="message-2">Your Message</Label>
+      <Textarea placeholder="Type your message here." id="message-2" />
+      <p className="text-sm text-muted-foreground">
+        Your message will be copied to the support team.
+      </p>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toast-demo.tsx b/apps/www/__registry__/new-york/component/toast-demo.tsx
new file mode 100644
index 0000000000..82aae7c7f5
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toast-demo.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { ToastAction } from "@/registry/new-york/ui/toast"
+import { useToast } from "@/registry/new-york/ui/use-toast"
+
+export default function ToastDemo() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Scheduled: Catch up ",
+          description: "Friday, February 10, 2023 at 5:57 PM",
+          action: (
+            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
+          ),
+        })
+      }}
+    >
+      Add to calendar
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toast-destructive.tsx b/apps/www/__registry__/new-york/component/toast-destructive.tsx
new file mode 100644
index 0000000000..d46725bf6b
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toast-destructive.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { ToastAction } from "@/registry/new-york/ui/toast"
+import { useToast } from "@/registry/new-york/ui/use-toast"
+
+export default function ToastDestructive() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          variant: "destructive",
+          title: "Uh oh! Something went wrong.",
+          description: "There was a problem with your request.",
+          action: <ToastAction altText="Try again">Try again</ToastAction>,
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toast-simple.tsx b/apps/www/__registry__/new-york/component/toast-simple.tsx
new file mode 100644
index 0000000000..eea4a8e643
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toast-simple.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { useToast } from "@/registry/new-york/ui/use-toast"
+
+export default function ToastSimple() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          description: "Your message has been sent.",
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toast-with-action.tsx b/apps/www/__registry__/new-york/component/toast-with-action.tsx
new file mode 100644
index 0000000000..7512927d63
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toast-with-action.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { ToastAction } from "@/registry/new-york/ui/toast"
+import { useToast } from "@/registry/new-york/ui/use-toast"
+
+export default function ToastWithAction() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Uh oh! Something went wrong.",
+          description: "There was a problem with your request.",
+          action: <ToastAction altText="Try again">Try again</ToastAction>,
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toast-with-title.tsx b/apps/www/__registry__/new-york/component/toast-with-title.tsx
new file mode 100644
index 0000000000..51d2e7ed5e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toast-with-title.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { Button } from "@/registry/new-york/ui/button"
+import { useToast } from "@/registry/new-york/ui/use-toast"
+
+export default function ToastWithTitle() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Uh oh! Something went wrong.",
+          description: "There was a problem with your request.",
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-demo.tsx b/apps/www/__registry__/new-york/component/toggle-demo.tsx
new file mode 100644
index 0000000000..99a329cf5b
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { FontBoldIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <FontBoldIcon className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-disabled.tsx b/apps/www/__registry__/new-york/component/toggle-disabled.tsx
new file mode 100644
index 0000000000..71db7757d3
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { UnderlineIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <UnderlineIcon className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-group-demo.tsx b/apps/www/__registry__/new-york/component/toggle-group-demo.tsx
new file mode 100644
index 0000000000..addc94e1e4
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-group-demo.tsx
@@ -0,0 +1,26 @@
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <FontBoldIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <FontItalicIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <UnderlineIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-group-disabled.tsx b/apps/www/__registry__/new-york/component/toggle-group-disabled.tsx
new file mode 100644
index 0000000000..c640c184ac
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-group-disabled.tsx
@@ -0,0 +1,26 @@
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" disabled>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <FontBoldIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <FontItalicIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <UnderlineIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-group-lg.tsx b/apps/www/__registry__/new-york/component/toggle-group-lg.tsx
new file mode 100644
index 0000000000..5dbd23ee36
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-group-lg.tsx
@@ -0,0 +1,26 @@
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" size="lg">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <FontBoldIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <FontItalicIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <UnderlineIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-group-outline.tsx b/apps/www/__registry__/new-york/component/toggle-group-outline.tsx
new file mode 100644
index 0000000000..58400d490a
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-group-outline.tsx
@@ -0,0 +1,26 @@
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <FontBoldIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <FontItalicIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <UnderlineIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-group-single.tsx b/apps/www/__registry__/new-york/component/toggle-group-single.tsx
new file mode 100644
index 0000000000..cf2c3faf6e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-group-single.tsx
@@ -0,0 +1,26 @@
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <FontBoldIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <FontItalicIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <UnderlineIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-group-sm.tsx b/apps/www/__registry__/new-york/component/toggle-group-sm.tsx
new file mode 100644
index 0000000000..76b451d94d
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-group-sm.tsx
@@ -0,0 +1,26 @@
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  UnderlineIcon,
+} from "@radix-ui/react-icons"
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/new-york/ui/toggle-group"
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single" size="sm">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <FontBoldIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <FontItalicIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+        <UnderlineIcon className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-lg.tsx b/apps/www/__registry__/new-york/component/toggle-lg.tsx
new file mode 100644
index 0000000000..b1c82354ed
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-lg.tsx
@@ -0,0 +1,11 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleLg() {
+  return (
+    <Toggle size="lg" aria-label="Toggle italic">
+      <FontItalicIcon className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-outline.tsx b/apps/www/__registry__/new-york/component/toggle-outline.tsx
new file mode 100644
index 0000000000..21a57eec11
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-outline.tsx
@@ -0,0 +1,11 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <FontItalicIcon className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-sm.tsx b/apps/www/__registry__/new-york/component/toggle-sm.tsx
new file mode 100644
index 0000000000..7886143855
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-sm.tsx
@@ -0,0 +1,11 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleSm() {
+  return (
+    <Toggle size="sm" aria-label="Toggle italic">
+      <FontItalicIcon className="h-4 w-4" />
+    </Toggle>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/toggle-with-text.tsx b/apps/www/__registry__/new-york/component/toggle-with-text.tsx
new file mode 100644
index 0000000000..adc93bdd39
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { FontItalicIcon } from "@radix-ui/react-icons"
+
+import { Toggle } from "@/registry/new-york/ui/toggle"
+
+export default function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <FontItalicIcon className="mr-2 h-4 w-4" />
+      Italic
+    </Toggle>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/tooltip-demo.tsx b/apps/www/__registry__/new-york/component/tooltip-demo.tsx
new file mode 100644
index 0000000000..680dfc4ba4
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export default function TooltipDemo() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-blockquote.tsx b/apps/www/__registry__/new-york/component/typography-blockquote.tsx
new file mode 100644
index 0000000000..21712995c0
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-blockquote.tsx
@@ -0,0 +1,8 @@
+export default function TypographyBlockquote() {
+  return (
+    <blockquote className="mt-6 border-l-2 pl-6 italic">
+      "After all," he said, "everyone enjoys a good joke, so it's only fair that
+      they should pay for the privilege."
+    </blockquote>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-demo.tsx b/apps/www/__registry__/new-york/component/typography-demo.tsx
new file mode 100644
index 0000000000..dfc6deebd5
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-demo.tsx
@@ -0,0 +1,119 @@
+export default function TypographyDemo() {
+  return (
+    <div>
+      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+        The Joke Tax Chronicles
+      </h1>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        Once upon a time, in a far-off land, there was a very lazy king who
+        spent all day lounging on his throne. One day, his advisors came to him
+        with a problem: the kingdom was running out of money.
+      </p>
+      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+        The King's Plan
+      </h2>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king thought long and hard, and finally came up with{" "}
+        <a
+          href="#"
+          className="font-medium text-primary underline underline-offset-4"
+        >
+          a brilliant plan
+        </a>
+        : he would tax the jokes in the kingdom.
+      </p>
+      <blockquote className="mt-6 border-l-2 pl-6 italic">
+        "After all," he said, "everyone enjoys a good joke, so it's only fair
+        that they should pay for the privilege."
+      </blockquote>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        The Joke Tax
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king's subjects were not amused. They grumbled and complained, but
+        the king was firm:
+      </p>
+      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners : 20 gold coins</li>
+      </ul>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        As a result, people stopped telling jokes, and the kingdom fell into a
+        gloom. But there was one person who refused to let the king's
+        foolishness get him down: a court jester named Jokester.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        Jokester's Revolt
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        Jokester began sneaking into the castle in the middle of the night and
+        leaving jokes all over the place: under the king's pillow, in his soup,
+        even in the royal toilet. The king was furious, but he couldn't seem to
+        stop Jokester.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        And then, one day, the people of the kingdom discovered that the jokes
+        left by Jokester were so funny that they couldn't help but laugh. And
+        once they started laughing, they couldn't stop.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        The People's Rebellion
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The people of the kingdom, feeling uplifted by the laughter, started to
+        tell jokes and puns again, and soon the entire kingdom was in on the
+        joke.
+      </p>
+      <div className="my-6 w-full overflow-y-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                King's Treasury
+              </th>
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                People's happiness
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Empty
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Overflowing
+              </td>
+            </tr>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Modest
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Satisfied
+              </td>
+            </tr>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Full
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Ecstatic
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king, seeing how much happier his subjects were, realized the error
+        of his ways and repealed the joke tax. Jokester was declared a hero, and
+        the kingdom lived happily ever after.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The moral of the story is: never underestimate the power of a good laugh
+        and always be careful of bad ideas.
+      </p>
+    </div>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-h1.tsx b/apps/www/__registry__/new-york/component/typography-h1.tsx
new file mode 100644
index 0000000000..0ee8f5dd4b
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-h1.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH1() {
+  return (
+    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+      Taxing Laughter: The Joke Tax Chronicles
+    </h1>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-h2.tsx b/apps/www/__registry__/new-york/component/typography-h2.tsx
new file mode 100644
index 0000000000..ea79441654
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-h2.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH2() {
+  return (
+    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
+      The People of the Kingdom
+    </h2>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-h3.tsx b/apps/www/__registry__/new-york/component/typography-h3.tsx
new file mode 100644
index 0000000000..4e8a1859cf
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-h3.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH3() {
+  return (
+    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+      The Joke Tax
+    </h3>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-h4.tsx b/apps/www/__registry__/new-york/component/typography-h4.tsx
new file mode 100644
index 0000000000..583516625e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-h4.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH4() {
+  return (
+    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+      People stopped telling jokes
+    </h4>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-inline-code.tsx b/apps/www/__registry__/new-york/component/typography-inline-code.tsx
new file mode 100644
index 0000000000..fbbc96ba68
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-inline-code.tsx
@@ -0,0 +1,7 @@
+export default function TypographyInlineCode() {
+  return (
+    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+      @radix-ui/react-alert-dialog
+    </code>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-large.tsx b/apps/www/__registry__/new-york/component/typography-large.tsx
new file mode 100644
index 0000000000..944f4478d3
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-large.tsx
@@ -0,0 +1,3 @@
+export default function TypographyLarge() {
+  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
+}
diff --git a/apps/www/__registry__/new-york/component/typography-lead.tsx b/apps/www/__registry__/new-york/component/typography-lead.tsx
new file mode 100644
index 0000000000..aac39ea29e
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-lead.tsx
@@ -0,0 +1,8 @@
+export default function TypographyLead() {
+  return (
+    <p className="text-xl text-muted-foreground">
+      A modal dialog that interrupts the user with important content and expects
+      a response.
+    </p>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-list.tsx b/apps/www/__registry__/new-york/component/typography-list.tsx
new file mode 100644
index 0000000000..a814f661f0
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-list.tsx
@@ -0,0 +1,9 @@
+export default function TypographyList() {
+  return (
+    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>1st level of puns: 5 gold coins</li>
+      <li>2nd level of jokes: 10 gold coins</li>
+      <li>3rd level of one-liners : 20 gold coins</li>
+    </ul>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-muted.tsx b/apps/www/__registry__/new-york/component/typography-muted.tsx
new file mode 100644
index 0000000000..545dcfc74f
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-muted.tsx
@@ -0,0 +1,5 @@
+export default function TypographyMuted() {
+  return (
+    <p className="text-sm text-muted-foreground">Enter your email address.</p>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-p.tsx b/apps/www/__registry__/new-york/component/typography-p.tsx
new file mode 100644
index 0000000000..88fd479548
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-p.tsx
@@ -0,0 +1,8 @@
+export default function TypographyP() {
+  return (
+    <p className="leading-7 [&:not(:first-child)]:mt-6">
+      The king, seeing how much happier his subjects were, realized the error of
+      his ways and repealed the joke tax.
+    </p>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-small.tsx b/apps/www/__registry__/new-york/component/typography-small.tsx
new file mode 100644
index 0000000000..822019d1df
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-small.tsx
@@ -0,0 +1,5 @@
+export default function TypographySmall() {
+  return (
+    <small className="text-sm font-medium leading-none">Email address</small>
+  )
+}
diff --git a/apps/www/__registry__/new-york/component/typography-table.tsx b/apps/www/__registry__/new-york/component/typography-table.tsx
new file mode 100644
index 0000000000..0698c47519
--- /dev/null
+++ b/apps/www/__registry__/new-york/component/typography-table.tsx
@@ -0,0 +1,44 @@
+export default function TypographyTable() {
+  return (
+    <div className="my-6 w-full overflow-y-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              King's Treasury
+            </th>
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              People's happiness
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Empty
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Overflowing
+            </td>
+          </tr>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Modest
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Satisfied
+            </td>
+          </tr>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Full
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Ecstatic
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
index bb6255553e..3e95b8fda3 100644
--- a/apps/www/public/registry/index.json
+++ b/apps/www/public/registry/index.json
@@ -1,30 +1,30 @@
 [
   {
     "name": "accordion",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-accordion"
     ],
     "files": [
       {
         "path": "ui/accordion.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "alert",
-    "type": "components:ui",
+    "type": "registry:ui",
     "files": [
       {
         "path": "ui/alert.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "alert-dialog",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-alert-dialog"
     ],
@@ -34,75 +34,75 @@
     "files": [
       {
         "path": "ui/alert-dialog.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "aspect-ratio",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-aspect-ratio"
     ],
     "files": [
       {
         "path": "ui/aspect-ratio.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "avatar",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-avatar"
     ],
     "files": [
       {
         "path": "ui/avatar.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "badge",
-    "type": "components:ui",
+    "type": "registry:ui",
     "files": [
       {
         "path": "ui/badge.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "breadcrumb",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-slot"
     ],
     "files": [
       {
         "path": "ui/breadcrumb.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "button",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-slot"
     ],
     "files": [
       {
         "path": "ui/button.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "calendar",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "react-day-picker@8.10.1",
       "date-fns"
@@ -113,23 +113,23 @@
     "files": [
       {
         "path": "ui/calendar.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "card",
-    "type": "components:ui",
+    "type": "registry:ui",
     "files": [
       {
         "path": "ui/card.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "carousel",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "embla-carousel-react"
     ],
@@ -139,13 +139,13 @@
     "files": [
       {
         "path": "ui/carousel.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "chart",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "recharts",
       "lucide-react"
@@ -156,39 +156,39 @@
     "files": [
       {
         "path": "ui/chart.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "checkbox",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-checkbox"
     ],
     "files": [
       {
         "path": "ui/checkbox.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "collapsible",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-collapsible"
     ],
     "files": [
       {
         "path": "ui/collapsible.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "command",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "cmdk@1.0.0"
     ],
@@ -198,39 +198,39 @@
     "files": [
       {
         "path": "ui/command.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "context-menu",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-context-menu"
     ],
     "files": [
       {
         "path": "ui/context-menu.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "dialog",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-dialog"
     ],
     "files": [
       {
         "path": "ui/dialog.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "drawer",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "vaul",
       "@radix-ui/react-dialog"
@@ -238,26 +238,26 @@
     "files": [
       {
         "path": "ui/drawer.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "dropdown-menu",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-dropdown-menu"
     ],
     "files": [
       {
         "path": "ui/dropdown-menu.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "form",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-label",
       "@radix-ui/react-slot",
@@ -272,228 +272,228 @@
     "files": [
       {
         "path": "ui/form.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "hover-card",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-hover-card"
     ],
     "files": [
       {
         "path": "ui/hover-card.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "input",
-    "type": "components:ui",
+    "type": "registry:ui",
     "files": [
       {
         "path": "ui/input.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "input-otp",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "input-otp"
     ],
     "files": [
       {
         "path": "ui/input-otp.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "label",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-label"
     ],
     "files": [
       {
         "path": "ui/label.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "menubar",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-menubar"
     ],
     "files": [
       {
         "path": "ui/menubar.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "navigation-menu",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-navigation-menu"
     ],
     "files": [
       {
         "path": "ui/navigation-menu.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "pagination",
-    "type": "components:ui",
+    "type": "registry:ui",
     "registryDependencies": [
       "button"
     ],
     "files": [
       {
         "path": "ui/pagination.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "popover",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-popover"
     ],
     "files": [
       {
         "path": "ui/popover.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "progress",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-progress"
     ],
     "files": [
       {
         "path": "ui/progress.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "radio-group",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-radio-group"
     ],
     "files": [
       {
         "path": "ui/radio-group.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "resizable",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "react-resizable-panels"
     ],
     "files": [
       {
         "path": "ui/resizable.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "scroll-area",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-scroll-area"
     ],
     "files": [
       {
         "path": "ui/scroll-area.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "select",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-select"
     ],
     "files": [
       {
         "path": "ui/select.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "separator",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-separator"
     ],
     "files": [
       {
         "path": "ui/separator.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "sheet",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-dialog"
     ],
     "files": [
       {
         "path": "ui/sheet.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "skeleton",
-    "type": "components:ui",
+    "type": "registry:ui",
     "files": [
       {
         "path": "ui/skeleton.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "slider",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-slider"
     ],
     "files": [
       {
         "path": "ui/slider.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "sonner",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "sonner",
       "next-themes"
@@ -501,93 +501,93 @@
     "files": [
       {
         "path": "ui/sonner.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "switch",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-switch"
     ],
     "files": [
       {
         "path": "ui/switch.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "table",
-    "type": "components:ui",
+    "type": "registry:ui",
     "files": [
       {
         "path": "ui/table.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "tabs",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-tabs"
     ],
     "files": [
       {
         "path": "ui/tabs.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "textarea",
-    "type": "components:ui",
+    "type": "registry:ui",
     "files": [
       {
         "path": "ui/textarea.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "toast",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-toast"
     ],
     "files": [
       {
         "path": "ui/toast.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       },
       {
         "path": "ui/use-toast.ts",
-        "type": "components:ui"
+        "type": "registry:ui"
       },
       {
         "path": "ui/toaster.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "toggle",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-toggle"
     ],
     "files": [
       {
         "path": "ui/toggle.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "toggle-group",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-toggle-group"
     ],
@@ -597,34 +597,39 @@
     "files": [
       {
         "path": "ui/toggle-group.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "tooltip",
-    "type": "components:ui",
+    "type": "registry:ui",
     "dependencies": [
       "@radix-ui/react-tooltip"
     ],
     "files": [
       {
         "path": "ui/tooltip.tsx",
-        "type": "components:ui"
+        "type": "registry:ui"
       }
     ]
   },
   {
     "name": "hello-block",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "button",
-      "use-media-query"
+      "use-media-query",
+      "card"
     ],
     "files": [
       {
-        "path": "block/hello-block.tsx",
-        "type": "components:block"
+        "path": "block/hello-block/hello-block.tsx",
+        "type": "registry:block"
+      },
+      {
+        "path": "block/hello-block/components/hello-card.tsx",
+        "type": "registry:block"
       }
     ],
     "tailwind": {
@@ -659,14 +664,14 @@
   },
   {
     "name": "charts-01",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "chart"
     ],
     "files": [
       {
         "path": "block/charts-01.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -674,7 +679,7 @@
   },
   {
     "name": "dashboard-05",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "badge",
       "breadcrumb",
@@ -693,7 +698,7 @@
     "files": [
       {
         "path": "block/dashboard-05.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -701,7 +706,7 @@
   },
   {
     "name": "dashboard-06",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "badge",
       "breadcrumb",
@@ -717,7 +722,7 @@
     "files": [
       {
         "path": "block/dashboard-06.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -725,7 +730,7 @@
   },
   {
     "name": "dashboard-07",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "badge",
       "breadcrumb",
@@ -744,7 +749,7 @@
     "files": [
       {
         "path": "block/dashboard-07.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -752,7 +757,7 @@
   },
   {
     "name": "dashboard-04",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "button",
       "card",
@@ -762,7 +767,7 @@
     "files": [
       {
         "path": "block/dashboard-04.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -770,7 +775,7 @@
   },
   {
     "name": "dashboard-03",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "badge",
       "button",
@@ -784,7 +789,7 @@
     "files": [
       {
         "path": "block/dashboard-03.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -792,7 +797,7 @@
   },
   {
     "name": "dashboard-02",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "badge",
       "button",
@@ -803,7 +808,7 @@
     "files": [
       {
         "path": "block/dashboard-02.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -811,7 +816,7 @@
   },
   {
     "name": "dashboard-01",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "button",
       "dropdown-menu",
@@ -821,7 +826,7 @@
     "files": [
       {
         "path": "block/dashboard-01.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Application",
@@ -829,7 +834,7 @@
   },
   {
     "name": "authentication-01",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "button",
       "card",
@@ -839,7 +844,7 @@
     "files": [
       {
         "path": "block/authentication-01.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Authentication",
@@ -847,7 +852,7 @@
   },
   {
     "name": "authentication-02",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "button",
       "card",
@@ -857,7 +862,7 @@
     "files": [
       {
         "path": "block/authentication-02.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Authentication",
@@ -865,7 +870,7 @@
   },
   {
     "name": "authentication-03",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "button",
       "card",
@@ -875,7 +880,7 @@
     "files": [
       {
         "path": "block/authentication-03.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Authentication",
@@ -883,7 +888,7 @@
   },
   {
     "name": "authentication-04",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "button",
       "card",
@@ -893,7 +898,7 @@
     "files": [
       {
         "path": "block/authentication-04.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Authentication",
@@ -901,7 +906,7 @@
   },
   {
     "name": "chart-area-axes",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -909,7 +914,7 @@
     "files": [
       {
         "path": "block/chart-area-axes.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -917,7 +922,7 @@
   },
   {
     "name": "chart-area-default",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -925,7 +930,7 @@
     "files": [
       {
         "path": "block/chart-area-default.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -933,7 +938,7 @@
   },
   {
     "name": "chart-area-gradient",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -941,7 +946,7 @@
     "files": [
       {
         "path": "block/chart-area-gradient.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -949,7 +954,7 @@
   },
   {
     "name": "chart-area-icons",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -957,7 +962,7 @@
     "files": [
       {
         "path": "block/chart-area-icons.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -965,7 +970,7 @@
   },
   {
     "name": "chart-area-interactive",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -973,7 +978,7 @@
     "files": [
       {
         "path": "block/chart-area-interactive.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -981,7 +986,7 @@
   },
   {
     "name": "chart-area-legend",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -989,7 +994,7 @@
     "files": [
       {
         "path": "block/chart-area-legend.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -997,7 +1002,7 @@
   },
   {
     "name": "chart-area-linear",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1005,7 +1010,7 @@
     "files": [
       {
         "path": "block/chart-area-linear.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1013,7 +1018,7 @@
   },
   {
     "name": "chart-area-stacked-expand",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1021,7 +1026,7 @@
     "files": [
       {
         "path": "block/chart-area-stacked-expand.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1029,7 +1034,7 @@
   },
   {
     "name": "chart-area-stacked",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1037,7 +1042,7 @@
     "files": [
       {
         "path": "block/chart-area-stacked.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1045,7 +1050,7 @@
   },
   {
     "name": "chart-area-step",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1053,7 +1058,7 @@
     "files": [
       {
         "path": "block/chart-area-step.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1061,7 +1066,7 @@
   },
   {
     "name": "chart-bar-active",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1069,7 +1074,7 @@
     "files": [
       {
         "path": "block/chart-bar-active.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1077,7 +1082,7 @@
   },
   {
     "name": "chart-bar-default",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1085,7 +1090,7 @@
     "files": [
       {
         "path": "block/chart-bar-default.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1093,7 +1098,7 @@
   },
   {
     "name": "chart-bar-horizontal",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1101,7 +1106,7 @@
     "files": [
       {
         "path": "block/chart-bar-horizontal.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1109,7 +1114,7 @@
   },
   {
     "name": "chart-bar-interactive",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1117,7 +1122,7 @@
     "files": [
       {
         "path": "block/chart-bar-interactive.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1125,7 +1130,7 @@
   },
   {
     "name": "chart-bar-label-custom",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1133,7 +1138,7 @@
     "files": [
       {
         "path": "block/chart-bar-label-custom.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1141,7 +1146,7 @@
   },
   {
     "name": "chart-bar-label",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1149,7 +1154,7 @@
     "files": [
       {
         "path": "block/chart-bar-label.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1157,7 +1162,7 @@
   },
   {
     "name": "chart-bar-mixed",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1165,7 +1170,7 @@
     "files": [
       {
         "path": "block/chart-bar-mixed.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1173,7 +1178,7 @@
   },
   {
     "name": "chart-bar-multiple",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1181,7 +1186,7 @@
     "files": [
       {
         "path": "block/chart-bar-multiple.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1189,7 +1194,7 @@
   },
   {
     "name": "chart-bar-negative",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1197,7 +1202,7 @@
     "files": [
       {
         "path": "block/chart-bar-negative.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1205,7 +1210,7 @@
   },
   {
     "name": "chart-bar-stacked",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1213,7 +1218,7 @@
     "files": [
       {
         "path": "block/chart-bar-stacked.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1221,7 +1226,7 @@
   },
   {
     "name": "chart-line-default",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1229,7 +1234,7 @@
     "files": [
       {
         "path": "block/chart-line-default.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1237,7 +1242,7 @@
   },
   {
     "name": "chart-line-dots-colors",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1245,7 +1250,7 @@
     "files": [
       {
         "path": "block/chart-line-dots-colors.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1253,7 +1258,7 @@
   },
   {
     "name": "chart-line-dots-custom",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1261,7 +1266,7 @@
     "files": [
       {
         "path": "block/chart-line-dots-custom.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1269,7 +1274,7 @@
   },
   {
     "name": "chart-line-dots",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1277,7 +1282,7 @@
     "files": [
       {
         "path": "block/chart-line-dots.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1285,7 +1290,7 @@
   },
   {
     "name": "chart-line-interactive",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1293,7 +1298,7 @@
     "files": [
       {
         "path": "block/chart-line-interactive.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1301,7 +1306,7 @@
   },
   {
     "name": "chart-line-label-custom",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1309,7 +1314,7 @@
     "files": [
       {
         "path": "block/chart-line-label-custom.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1317,7 +1322,7 @@
   },
   {
     "name": "chart-line-label",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1325,7 +1330,7 @@
     "files": [
       {
         "path": "block/chart-line-label.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1333,7 +1338,7 @@
   },
   {
     "name": "chart-line-linear",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1341,7 +1346,7 @@
     "files": [
       {
         "path": "block/chart-line-linear.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1349,7 +1354,7 @@
   },
   {
     "name": "chart-line-multiple",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1357,7 +1362,7 @@
     "files": [
       {
         "path": "block/chart-line-multiple.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1365,7 +1370,7 @@
   },
   {
     "name": "chart-line-step",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1373,7 +1378,7 @@
     "files": [
       {
         "path": "block/chart-line-step.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1381,7 +1386,7 @@
   },
   {
     "name": "chart-pie-donut-active",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1389,7 +1394,7 @@
     "files": [
       {
         "path": "block/chart-pie-donut-active.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1397,7 +1402,7 @@
   },
   {
     "name": "chart-pie-donut-text",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1405,7 +1410,7 @@
     "files": [
       {
         "path": "block/chart-pie-donut-text.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1413,7 +1418,7 @@
   },
   {
     "name": "chart-pie-donut",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1421,7 +1426,7 @@
     "files": [
       {
         "path": "block/chart-pie-donut.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1429,7 +1434,7 @@
   },
   {
     "name": "chart-pie-interactive",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1437,7 +1442,7 @@
     "files": [
       {
         "path": "block/chart-pie-interactive.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1445,7 +1450,7 @@
   },
   {
     "name": "chart-pie-label-custom",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1453,7 +1458,7 @@
     "files": [
       {
         "path": "block/chart-pie-label-custom.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1461,7 +1466,7 @@
   },
   {
     "name": "chart-pie-label-list",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1469,7 +1474,7 @@
     "files": [
       {
         "path": "block/chart-pie-label-list.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1477,7 +1482,7 @@
   },
   {
     "name": "chart-pie-label",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1485,7 +1490,7 @@
     "files": [
       {
         "path": "block/chart-pie-label.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1493,7 +1498,7 @@
   },
   {
     "name": "chart-pie-legend",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1501,7 +1506,7 @@
     "files": [
       {
         "path": "block/chart-pie-legend.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1509,7 +1514,7 @@
   },
   {
     "name": "chart-pie-separator-none",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1517,7 +1522,7 @@
     "files": [
       {
         "path": "block/chart-pie-separator-none.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1525,7 +1530,7 @@
   },
   {
     "name": "chart-pie-simple",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1533,7 +1538,7 @@
     "files": [
       {
         "path": "block/chart-pie-simple.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1541,7 +1546,7 @@
   },
   {
     "name": "chart-pie-stacked",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1549,7 +1554,7 @@
     "files": [
       {
         "path": "block/chart-pie-stacked.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1557,7 +1562,7 @@
   },
   {
     "name": "chart-radar-default",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1565,7 +1570,7 @@
     "files": [
       {
         "path": "block/chart-radar-default.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1573,7 +1578,7 @@
   },
   {
     "name": "chart-radar-dots",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1581,7 +1586,7 @@
     "files": [
       {
         "path": "block/chart-radar-dots.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1589,7 +1594,7 @@
   },
   {
     "name": "chart-radar-grid-circle-fill",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1597,7 +1602,7 @@
     "files": [
       {
         "path": "block/chart-radar-grid-circle-fill.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1605,7 +1610,7 @@
   },
   {
     "name": "chart-radar-grid-circle-no-lines",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1613,7 +1618,7 @@
     "files": [
       {
         "path": "block/chart-radar-grid-circle-no-lines.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1621,7 +1626,7 @@
   },
   {
     "name": "chart-radar-grid-circle",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1629,7 +1634,7 @@
     "files": [
       {
         "path": "block/chart-radar-grid-circle.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1637,7 +1642,7 @@
   },
   {
     "name": "chart-radar-grid-custom",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1645,7 +1650,7 @@
     "files": [
       {
         "path": "block/chart-radar-grid-custom.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1653,7 +1658,7 @@
   },
   {
     "name": "chart-radar-grid-fill",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1661,7 +1666,7 @@
     "files": [
       {
         "path": "block/chart-radar-grid-fill.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1669,7 +1674,7 @@
   },
   {
     "name": "chart-radar-grid-none",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1677,7 +1682,7 @@
     "files": [
       {
         "path": "block/chart-radar-grid-none.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1685,7 +1690,7 @@
   },
   {
     "name": "chart-radar-icons",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1693,7 +1698,7 @@
     "files": [
       {
         "path": "block/chart-radar-icons.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1701,7 +1706,7 @@
   },
   {
     "name": "chart-radar-label-custom",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1709,7 +1714,7 @@
     "files": [
       {
         "path": "block/chart-radar-label-custom.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1717,7 +1722,7 @@
   },
   {
     "name": "chart-radar-legend",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1725,7 +1730,7 @@
     "files": [
       {
         "path": "block/chart-radar-legend.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1733,7 +1738,7 @@
   },
   {
     "name": "chart-radar-lines-only",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1741,7 +1746,7 @@
     "files": [
       {
         "path": "block/chart-radar-lines-only.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1749,7 +1754,7 @@
   },
   {
     "name": "chart-radar-multiple",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1757,7 +1762,7 @@
     "files": [
       {
         "path": "block/chart-radar-multiple.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1765,7 +1770,7 @@
   },
   {
     "name": "chart-radar-radius",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1773,7 +1778,7 @@
     "files": [
       {
         "path": "block/chart-radar-radius.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1781,7 +1786,7 @@
   },
   {
     "name": "chart-radial-grid",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1789,7 +1794,7 @@
     "files": [
       {
         "path": "block/chart-radial-grid.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1797,7 +1802,7 @@
   },
   {
     "name": "chart-radial-label",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1805,7 +1810,7 @@
     "files": [
       {
         "path": "block/chart-radial-label.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1813,7 +1818,7 @@
   },
   {
     "name": "chart-radial-shape",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1821,7 +1826,7 @@
     "files": [
       {
         "path": "block/chart-radial-shape.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1829,7 +1834,7 @@
   },
   {
     "name": "chart-radial-simple",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1837,7 +1842,7 @@
     "files": [
       {
         "path": "block/chart-radial-simple.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1845,7 +1850,7 @@
   },
   {
     "name": "chart-radial-stacked",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1853,7 +1858,7 @@
     "files": [
       {
         "path": "block/chart-radial-stacked.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1861,7 +1866,7 @@
   },
   {
     "name": "chart-radial-text",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1869,7 +1874,7 @@
     "files": [
       {
         "path": "block/chart-radial-text.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1877,7 +1882,7 @@
   },
   {
     "name": "chart-tooltip-default",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1885,7 +1890,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-default.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1893,7 +1898,7 @@
   },
   {
     "name": "chart-tooltip-indicator-line",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1901,7 +1906,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-indicator-line.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1909,7 +1914,7 @@
   },
   {
     "name": "chart-tooltip-indicator-none",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1917,7 +1922,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-indicator-none.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1925,7 +1930,7 @@
   },
   {
     "name": "chart-tooltip-label-none",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1933,7 +1938,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-label-none.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1941,7 +1946,7 @@
   },
   {
     "name": "chart-tooltip-label-custom",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1949,7 +1954,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-label-custom.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1957,7 +1962,7 @@
   },
   {
     "name": "chart-tooltip-label-formatter",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1965,7 +1970,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-label-formatter.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1973,7 +1978,7 @@
   },
   {
     "name": "chart-tooltip-formatter",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1981,7 +1986,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-formatter.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -1989,7 +1994,7 @@
   },
   {
     "name": "chart-tooltip-icons",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -1997,7 +2002,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-icons.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -2005,7 +2010,7 @@
   },
   {
     "name": "chart-tooltip-advanced",
-    "type": "components:block",
+    "type": "registry:block",
     "registryDependencies": [
       "card",
       "chart"
@@ -2013,7 +2018,7 @@
     "files": [
       {
         "path": "block/chart-tooltip-advanced.tsx",
-        "type": "components:block"
+        "type": "registry:block"
       }
     ],
     "category": "Charts",
@@ -2032,5 +2037,18 @@
         "type": "registry:lib"
       }
     ]
+  },
+  {
+    "name": "use-media-query",
+    "type": "registry:hook",
+    "dependencies": [
+      "@react-hook/window-size@1.0.3"
+    ],
+    "files": [
+      {
+        "path": "hooks/use-media-query.ts",
+        "type": "registry:hook"
+      }
+    ]
   }
 ]
\ No newline at end of file
diff --git a/apps/www/public/registry/styles/default/accordion.json b/apps/www/public/registry/styles/default/accordion.json
index a3df177048..7867a6cb18 100644
--- a/apps/www/public/registry/styles/default/accordion.json
+++ b/apps/www/public/registry/styles/default/accordion.json
@@ -1,13 +1,13 @@
 {
   "name": "accordion",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-accordion"
   ],
   "files": [
     {
       "path": "ui/accordion.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/alert-dialog.json b/apps/www/public/registry/styles/default/alert-dialog.json
index 663edba5d5..ed5106cc95 100644
--- a/apps/www/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/public/registry/styles/default/alert-dialog.json
@@ -1,6 +1,6 @@
 {
   "name": "alert-dialog",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-alert-dialog"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/alert-dialog.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    />\n  </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold\", className)}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(buttonVariants(), className)}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      buttonVariants({ variant: \"outline\" }),\n      \"mt-2 sm:mt-0\",\n      className\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/alert.json b/apps/www/public/registry/styles/default/alert.json
index 41ea5ee208..51f457627e 100644
--- a/apps/www/public/registry/styles/default/alert.json
+++ b/apps/www/public/registry/styles/default/alert.json
@@ -1,10 +1,10 @@
 {
   "name": "alert",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/alert.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/aspect-ratio.json b/apps/www/public/registry/styles/default/aspect-ratio.json
index 8dcf7cbe9f..f9d4d2d941 100644
--- a/apps/www/public/registry/styles/default/aspect-ratio.json
+++ b/apps/www/public/registry/styles/default/aspect-ratio.json
@@ -1,13 +1,13 @@
 {
   "name": "aspect-ratio",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-aspect-ratio"
   ],
   "files": [
     {
       "path": "ui/aspect-ratio.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/authentication-01.json b/apps/www/public/registry/styles/default/authentication-01.json
index a814dbd3fe..84db9e1595 100644
--- a/apps/www/public/registry/styles/default/authentication-01.json
+++ b/apps/www/public/registry/styles/default/authentication-01.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-01",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-01.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport const description =\n  \"A simple login form with email and password. The submit button says 'Sign in'.\"\n\nexport const iframeHeight = \"600px\"\n\nexport const containerClassName =\n  \"w-full h-screen flex items-center justify-center px-4\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">Sign in</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/authentication-02.json b/apps/www/public/registry/styles/default/authentication-02.json
index b4bac20bfa..d4828ec070 100644
--- a/apps/www/public/registry/styles/default/authentication-02.json
+++ b/apps/www/public/registry/styles/default/authentication-02.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-02",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-02.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport const description =\n  \"A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account.\"\n\nexport const iframeHeight = \"600px\"\n\nexport const containerClassName =\n  \"w-full h-screen flex items-center justify-center px-4\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center\">\n              <Label htmlFor=\"password\">Password</Label>\n              <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                Forgot your password?\n              </Link>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Don&apos;t have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/authentication-03.json b/apps/www/public/registry/styles/default/authentication-03.json
index 03badab788..929ed47bf2 100644
--- a/apps/www/public/registry/styles/default/authentication-03.json
+++ b/apps/www/public/registry/styles/default/authentication-03.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-03",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-03.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport const description =\n  \"A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account\"\n\nexport const iframeHeight = \"600px\"\n\nexport const containerClassName =\n  \"w-full h-screen flex items-center justify-center px-4\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-xl\">Sign Up</CardTitle>\n        <CardDescription>\n          Enter your information to create an account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"first-name\">First name</Label>\n              <Input id=\"first-name\" placeholder=\"Max\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"last-name\">Last name</Label>\n              <Input id=\"last-name\" placeholder=\"Robinson\" required />\n            </div>\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"password\">Password</Label>\n            <Input id=\"password\" type=\"password\" />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Create an account\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Sign up with GitHub\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign in\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/authentication-04.json b/apps/www/public/registry/styles/default/authentication-04.json
index 7e8477acac..0f4a25857c 100644
--- a/apps/www/public/registry/styles/default/authentication-04.json
+++ b/apps/www/public/registry/styles/default/authentication-04.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-04",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-04.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport const description =\n  \"A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.\"\n\nexport const iframeHeight = \"800px\"\n\nexport const containerClassName = \"w-full h-full p-4 lg:p-0\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto grid w-[350px] gap-6\">\n          <div className=\"grid gap-2 text-center\">\n            <h1 className=\"text-3xl font-bold\">Login</h1>\n            <p className=\"text-balance text-muted-foreground\">\n              Enter your email below to login to your account\n            </p>\n          </div>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center\">\n                <Label htmlFor=\"password\">Password</Label>\n                <Link\n                  href=\"/forgot-password\"\n                  className=\"ml-auto inline-block text-sm underline\"\n                >\n                  Forgot your password?\n                </Link>\n              </div>\n              <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n              Login\n            </Button>\n            <Button variant=\"outline\" className=\"w-full\">\n              Login with Google\n            </Button>\n          </div>\n          <div className=\"mt-4 text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <Link href=\"#\" className=\"underline\">\n              Sign up\n            </Link>\n          </div>\n        </div>\n      </div>\n      <div className=\"hidden bg-muted lg:block\">\n        <Image\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          width=\"1920\"\n          height=\"1080\"\n          className=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/avatar.json b/apps/www/public/registry/styles/default/avatar.json
index 6da8b9c7e4..7d3cec0070 100644
--- a/apps/www/public/registry/styles/default/avatar.json
+++ b/apps/www/public/registry/styles/default/avatar.json
@@ -1,13 +1,13 @@
 {
   "name": "avatar",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-avatar"
   ],
   "files": [
     {
       "path": "ui/avatar.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/badge.json b/apps/www/public/registry/styles/default/badge.json
index bf240819de..aaf8ba6a51 100644
--- a/apps/www/public/registry/styles/default/badge.json
+++ b/apps/www/public/registry/styles/default/badge.json
@@ -1,10 +1,10 @@
 {
   "name": "badge",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/badge.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/breadcrumb.json b/apps/www/public/registry/styles/default/breadcrumb.json
index 0a1eab6d7c..58627a99ef 100644
--- a/apps/www/public/registry/styles/default/breadcrumb.json
+++ b/apps/www/public/registry/styles/default/breadcrumb.json
@@ -1,13 +1,13 @@
 {
   "name": "breadcrumb",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/breadcrumb.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:size-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/button.json b/apps/www/public/registry/styles/default/button.json
index 433ac3a52d..2410ca0d9f 100644
--- a/apps/www/public/registry/styles/default/button.json
+++ b/apps/www/public/registry/styles/default/button.json
@@ -1,13 +1,13 @@
 {
   "name": "button",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/button.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/calendar.json b/apps/www/public/registry/styles/default/calendar.json
index 2660f6b4d2..8eccabd958 100644
--- a/apps/www/public/registry/styles/default/calendar.json
+++ b/apps/www/public/registry/styles/default/calendar.json
@@ -1,6 +1,6 @@
 {
   "name": "calendar",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "react-day-picker@8.10.1",
     "date-fns"
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/card.json b/apps/www/public/registry/styles/default/card.json
index 24e3d1efa5..f04a6704dc 100644
--- a/apps/www/public/registry/styles/default/card.json
+++ b/apps/www/public/registry/styles/default/card.json
@@ -1,10 +1,10 @@
 {
   "name": "card",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/card.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/carousel.json b/apps/www/public/registry/styles/default/carousel.json
index 20d67468f0..795a31c720 100644
--- a/apps/www/public/registry/styles/default/carousel.json
+++ b/apps/www/public/registry/styles/default/carousel.json
@@ -1,6 +1,6 @@
 {
   "name": "carousel",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "embla-carousel-react"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/carousel.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on(\"reInit\", onSelect)\n      api.on(\"select\", onSelect)\n\n      return () => {\n        api?.off(\"select\", onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute  h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/chart-area-axes.json b/apps/www/public/registry/styles/default/chart-area-axes.json
index 06944a5e0f..1c614d40d4 100644
--- a/apps/www/public/registry/styles/default/chart-area-axes.json
+++ b/apps/www/public/registry/styles/default/chart-area-axes.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-axes",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-axes.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-default.json b/apps/www/public/registry/styles/default/chart-area-default.json
index fe32146185..7ee060fabc 100644
--- a/apps/www/public/registry/styles/default/chart-area-default.json
+++ b/apps/www/public/registry/styles/default/chart-area-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-gradient.json b/apps/www/public/registry/styles/default/chart-area-gradient.json
index d238c4ca2d..426170d1af 100644
--- a/apps/www/public/registry/styles/default/chart-area-gradient.json
+++ b/apps/www/public/registry/styles/default/chart-area-gradient.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-gradient",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-gradient.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-icons.json b/apps/www/public/registry/styles/default/chart-area-icons.json
index 38825f3050..e3523d995e 100644
--- a/apps/www/public/registry/styles/default/chart-area-icons.json
+++ b/apps/www/public/registry/styles/default/chart-area-icons.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-icons",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-icons.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-interactive.json b/apps/www/public/registry/styles/default/chart-area-interactive.json
index 839b207625..4e9d5e8def 100644
--- a/apps/www/public/registry/styles/default/chart-area-interactive.json
+++ b/apps/www/public/registry/styles/default/chart-area-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const now = new Date()\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    now.setDate(now.getDate() - daysToSubtract)\n    return date >= now\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-legend.json b/apps/www/public/registry/styles/default/chart-area-legend.json
index 358f052676..1f57d30e90 100644
--- a/apps/www/public/registry/styles/default/chart-area-legend.json
+++ b/apps/www/public/registry/styles/default/chart-area-legend.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-legend",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-legend.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-linear.json b/apps/www/public/registry/styles/default/chart-area-linear.json
index acbff30fa3..f41f13c756 100644
--- a/apps/www/public/registry/styles/default/chart-area-linear.json
+++ b/apps/www/public/registry/styles/default/chart-area-linear.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-linear",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-linear.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-stacked-expand.json b/apps/www/public/registry/styles/default/chart-area-stacked-expand.json
index be6e6f2d01..89a2d4b90b 100644
--- a/apps/www/public/registry/styles/default/chart-area-stacked-expand.json
+++ b/apps/www/public/registry/styles/default/chart-area-stacked-expand.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-stacked-expand",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-stacked-expand.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-3))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-stacked.json b/apps/www/public/registry/styles/default/chart-area-stacked.json
index e705b8f4fa..23d0879d6b 100644
--- a/apps/www/public/registry/styles/default/chart-area-stacked.json
+++ b/apps/www/public/registry/styles/default/chart-area-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-area-step.json b/apps/www/public/registry/styles/default/chart-area-step.json
index 41778810dd..803de18eea 100644
--- a/apps/www/public/registry/styles/default/chart-area-step.json
+++ b/apps/www/public/registry/styles/default/chart-area-step.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-step",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-step.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-active.json b/apps/www/public/registry/styles/default/chart-bar-active.json
index 23b721728b..b18f38f2b1 100644
--- a/apps/www/public/registry/styles/default/chart-bar-active.json
+++ b/apps/www/public/registry/styles/default/chart-bar-active.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-active",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-active.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-default.json b/apps/www/public/registry/styles/default/chart-bar-default.json
index f693023d82..f8594634e6 100644
--- a/apps/www/public/registry/styles/default/chart-bar-default.json
+++ b/apps/www/public/registry/styles/default/chart-bar-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-horizontal.json b/apps/www/public/registry/styles/default/chart-bar-horizontal.json
index 7d0b518079..b3f27ec16e 100644
--- a/apps/www/public/registry/styles/default/chart-bar-horizontal.json
+++ b/apps/www/public/registry/styles/default/chart-bar-horizontal.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-horizontal",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-horizontal.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-interactive.json b/apps/www/public/registry/styles/default/chart-bar-interactive.json
index 87041c5ef4..7659096159 100644
--- a/apps/www/public/registry/styles/default/chart-bar-interactive.json
+++ b/apps/www/public/registry/styles/default/chart-bar-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"An interactive bar chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-label-custom.json b/apps/www/public/registry/styles/default/chart-bar-label-custom.json
index 3bcc25ceba..44eeb5d513 100644
--- a/apps/www/public/registry/styles/default/chart-bar-label-custom.json
+++ b/apps/www/public/registry/styles/default/chart-bar-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  label: {\n    color: \"hsl(var(--background))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-[--color-label]\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-label.json b/apps/www/public/registry/styles/default/chart-bar-label.json
index 6a2930b3a4..18387ba3e0 100644
--- a/apps/www/public/registry/styles/default/chart-bar-label.json
+++ b/apps/www/public/registry/styles/default/chart-bar-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-mixed.json b/apps/www/public/registry/styles/default/chart-bar-mixed.json
index dba2d9f0ab..6de5aaacf2 100644
--- a/apps/www/public/registry/styles/default/chart-bar-mixed.json
+++ b/apps/www/public/registry/styles/default/chart-bar-mixed.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-mixed",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-mixed.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-multiple.json b/apps/www/public/registry/styles/default/chart-bar-multiple.json
index 5a7272768b..9abbf7f362 100644
--- a/apps/www/public/registry/styles/default/chart-bar-multiple.json
+++ b/apps/www/public/registry/styles/default/chart-bar-multiple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-multiple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-multiple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-negative.json b/apps/www/public/registry/styles/default/chart-bar-negative.json
index d3ffd86d29..2b64cdc4ad 100644
--- a/apps/www/public/registry/styles/default/chart-bar-negative.json
+++ b/apps/www/public/registry/styles/default/chart-bar-negative.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-negative",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-negative.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={\n                    item.visitors > 0\n                      ? \"hsl(var(--chart-1))\"\n                      : \"hsl(var(--chart-2))\"\n                  }\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-bar-stacked.json b/apps/www/public/registry/styles/default/chart-bar-stacked.json
index 04a38e5aaa..461f0201a6 100644
--- a/apps/www/public/registry/styles/default/chart-bar-stacked.json
+++ b/apps/www/public/registry/styles/default/chart-bar-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-default.json b/apps/www/public/registry/styles/default/chart-line-default.json
index f937a23a88..e4eb0855ed 100644
--- a/apps/www/public/registry/styles/default/chart-line-default.json
+++ b/apps/www/public/registry/styles/default/chart-line-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-dots-colors.json b/apps/www/public/registry/styles/default/chart-line-dots-colors.json
index 3bf105fd40..d77f5c6e60 100644
--- a/apps/www/public/registry/styles/default/chart-line-dots-colors.json
+++ b/apps/www/public/registry/styles/default/chart-line-dots-colors.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-dots-colors",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-dots-colors.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-dots-custom.json b/apps/www/public/registry/styles/default/chart-line-dots-custom.json
index 17c58714d8..46d1626768 100644
--- a/apps/www/public/registry/styles/default/chart-line-dots-custom.json
+++ b/apps/www/public/registry/styles/default/chart-line-dots-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-dots-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-dots-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-dots.json b/apps/www/public/registry/styles/default/chart-line-dots.json
index abea2fcc55..a708e42598 100644
--- a/apps/www/public/registry/styles/default/chart-line-dots.json
+++ b/apps/www/public/registry/styles/default/chart-line-dots.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-dots",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-dots.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-interactive.json b/apps/www/public/registry/styles/default/chart-line-interactive.json
index 442cf45146..467e089179 100644
--- a/apps/www/public/registry/styles/default/chart-line-interactive.json
+++ b/apps/www/public/registry/styles/default/chart-line-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"An interactive line chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-label-custom.json b/apps/www/public/registry/styles/default/chart-line-label-custom.json
index 8aa393372c..2484ff3249 100644
--- a/apps/www/public/registry/styles/default/chart-line-label-custom.json
+++ b/apps/www/public/registry/styles/default/chart-line-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-label.json b/apps/www/public/registry/styles/default/chart-line-label.json
index 8510166369..adbd68ff0f 100644
--- a/apps/www/public/registry/styles/default/chart-line-label.json
+++ b/apps/www/public/registry/styles/default/chart-line-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-linear.json b/apps/www/public/registry/styles/default/chart-line-linear.json
index a847d3613b..3767606393 100644
--- a/apps/www/public/registry/styles/default/chart-line-linear.json
+++ b/apps/www/public/registry/styles/default/chart-line-linear.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-linear",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-linear.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-multiple.json b/apps/www/public/registry/styles/default/chart-line-multiple.json
index b59c093579..229cae74d1 100644
--- a/apps/www/public/registry/styles/default/chart-line-multiple.json
+++ b/apps/www/public/registry/styles/default/chart-line-multiple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-multiple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-multiple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-line-step.json b/apps/www/public/registry/styles/default/chart-line-step.json
index 72f0d43f06..e8b9d038a0 100644
--- a/apps/www/public/registry/styles/default/chart-line-step.json
+++ b/apps/www/public/registry/styles/default/chart-line-step.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-step",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-step.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-donut-active.json b/apps/www/public/registry/styles/default/chart-pie-donut-active.json
index 77d32483b8..ec222d3037 100644
--- a/apps/www/public/registry/styles/default/chart-pie-donut-active.json
+++ b/apps/www/public/registry/styles/default/chart-pie-donut-active.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-donut-active",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-donut-active.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-donut-text.json b/apps/www/public/registry/styles/default/chart-pie-donut-text.json
index 0727893517..7299b97232 100644
--- a/apps/www/public/registry/styles/default/chart-pie-donut-text.json
+++ b/apps/www/public/registry/styles/default/chart-pie-donut-text.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-donut-text",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-donut-text.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-donut.json b/apps/www/public/registry/styles/default/chart-pie-donut.json
index 444a57c64e..6217ca99d4 100644
--- a/apps/www/public/registry/styles/default/chart-pie-donut.json
+++ b/apps/www/public/registry/styles/default/chart-pie-donut.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-donut",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-donut.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-interactive.json b/apps/www/public/registry/styles/default/chart-pie-interactive.json
index e6a0f39eda..6b64e17311 100644
--- a/apps/www/public/registry/styles/default/chart-pie-interactive.json
+++ b/apps/www/public/registry/styles/default/chart-pie-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-label-custom.json b/apps/www/public/registry/styles/default/chart-pie-label-custom.json
index c6c8a7f767..e712d2f220 100644
--- a/apps/www/public/registry/styles/default/chart-pie-label-custom.json
+++ b/apps/www/public/registry/styles/default/chart-pie-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {`${\n                      chartConfig[payload.browser as keyof typeof chartConfig]\n                        ?.label\n                    } (${payload.visitors})`}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-label-list.json b/apps/www/public/registry/styles/default/chart-pie-label-list.json
index 6e9db4f08c..dc2e598708 100644
--- a/apps/www/public/registry/styles/default/chart-pie-label-list.json
+++ b/apps/www/public/registry/styles/default/chart-pie-label-list.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-label-list",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-label-list.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-label.json b/apps/www/public/registry/styles/default/chart-pie-label.json
index a4fe7fca60..a152d6d9a9 100644
--- a/apps/www/public/registry/styles/default/chart-pie-label.json
+++ b/apps/www/public/registry/styles/default/chart-pie-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-legend.json b/apps/www/public/registry/styles/default/chart-pie-legend.json
index 302659f621..71ad2c6a5c 100644
--- a/apps/www/public/registry/styles/default/chart-pie-legend.json
+++ b/apps/www/public/registry/styles/default/chart-pie-legend.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-legend",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-legend.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A pie chart with a legend\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-separator-none.json b/apps/www/public/registry/styles/default/chart-pie-separator-none.json
index 37f2a08698..cceabc9984 100644
--- a/apps/www/public/registry/styles/default/chart-pie-separator-none.json
+++ b/apps/www/public/registry/styles/default/chart-pie-separator-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-separator-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-separator-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-simple.json b/apps/www/public/registry/styles/default/chart-pie-simple.json
index 4da01cab02..cb33b3a45e 100644
--- a/apps/www/public/registry/styles/default/chart-pie-simple.json
+++ b/apps/www/public/registry/styles/default/chart-pie-simple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-simple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-simple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-pie-stacked.json b/apps/www/public/registry/styles/default/chart-pie-stacked.json
index 8af5da2283..e7a119dca0 100644
--- a/apps/www/public/registry/styles/default/chart-pie-stacked.json
+++ b/apps/www/public/registry/styles/default/chart-pie-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-default.json b/apps/www/public/registry/styles/default/chart-radar-default.json
index 0d46da6cd2..9656b229d3 100644
--- a/apps/www/public/registry/styles/default/chart-radar-default.json
+++ b/apps/www/public/registry/styles/default/chart-radar-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-dots.json b/apps/www/public/registry/styles/default/chart-radar-dots.json
index 4ccdbfbc90..418d35a3c3 100644
--- a/apps/www/public/registry/styles/default/chart-radar-dots.json
+++ b/apps/www/public/registry/styles/default/chart-radar-dots.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-dots",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-dots.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-grid-circle-fill.json b/apps/www/public/registry/styles/default/chart-radar-grid-circle-fill.json
index bb649faf5b..442862f024 100644
--- a/apps/www/public/registry/styles/default/chart-radar-grid-circle-fill.json
+++ b/apps/www/public/registry/styles/default/chart-radar-grid-circle-fill.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-circle-fill",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-circle-fill.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-[--color-desktop] opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-grid-circle-no-lines.json b/apps/www/public/registry/styles/default/chart-radar-grid-circle-no-lines.json
index d3e82a5762..d12939b372 100644
--- a/apps/www/public/registry/styles/default/chart-radar-grid-circle-no-lines.json
+++ b/apps/www/public/registry/styles/default/chart-radar-grid-circle-no-lines.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-circle-no-lines",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-circle-no-lines.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-grid-circle.json b/apps/www/public/registry/styles/default/chart-radar-grid-circle.json
index 751c69fbd8..0859e20b4e 100644
--- a/apps/www/public/registry/styles/default/chart-radar-grid-circle.json
+++ b/apps/www/public/registry/styles/default/chart-radar-grid-circle.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-circle",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-circle.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-grid-custom.json b/apps/www/public/registry/styles/default/chart-radar-grid-custom.json
index 65d1529dad..1954d3a702 100644
--- a/apps/www/public/registry/styles/default/chart-radar-grid-custom.json
+++ b/apps/www/public/registry/styles/default/chart-radar-grid-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-grid-fill.json b/apps/www/public/registry/styles/default/chart-radar-grid-fill.json
index 87f912a21a..9eb042de1f 100644
--- a/apps/www/public/registry/styles/default/chart-radar-grid-fill.json
+++ b/apps/www/public/registry/styles/default/chart-radar-grid-fill.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-fill",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-fill.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-grid-none.json b/apps/www/public/registry/styles/default/chart-radar-grid-none.json
index 07fa2429e8..4842a4cde6 100644
--- a/apps/www/public/registry/styles/default/chart-radar-grid-none.json
+++ b/apps/www/public/registry/styles/default/chart-radar-grid-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-icons.json b/apps/www/public/registry/styles/default/chart-radar-icons.json
index b8acc2e880..d6060a191a 100644
--- a/apps/www/public/registry/styles/default/chart-radar-icons.json
+++ b/apps/www/public/registry/styles/default/chart-radar-icons.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-icons",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-icons.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-label-custom.json b/apps/www/public/registry/styles/default/chart-radar-label-custom.json
index da2e0f4dd9..1c84ee6788 100644
--- a/apps/www/public/registry/styles/default/chart-radar-label-custom.json
+++ b/apps/www/public/registry/styles/default/chart-radar-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-legend.json b/apps/www/public/registry/styles/default/chart-radar-legend.json
index 53808163d8..19af9372ac 100644
--- a/apps/www/public/registry/styles/default/chart-radar-legend.json
+++ b/apps/www/public/registry/styles/default/chart-radar-legend.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-legend",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-legend.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-lines-only.json b/apps/www/public/registry/styles/default/chart-radar-lines-only.json
index 90312667e0..f1db468756 100644
--- a/apps/www/public/registry/styles/default/chart-radar-lines-only.json
+++ b/apps/www/public/registry/styles/default/chart-radar-lines-only.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-lines-only",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-lines-only.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-multiple.json b/apps/www/public/registry/styles/default/chart-radar-multiple.json
index bf0558bfe3..5f76bb2a63 100644
--- a/apps/www/public/registry/styles/default/chart-radar-multiple.json
+++ b/apps/www/public/registry/styles/default/chart-radar-multiple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-multiple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-multiple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radar-radius.json b/apps/www/public/registry/styles/default/chart-radar-radius.json
index 71b28981a4..a95bbeffc0 100644
--- a/apps/www/public/registry/styles/default/chart-radar-radius.json
+++ b/apps/www/public/registry/styles/default/chart-radar-radius.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-radius",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-radius.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radial-grid.json b/apps/www/public/registry/styles/default/chart-radial-grid.json
index 86e58fac76..e93206d01e 100644
--- a/apps/www/public/registry/styles/default/chart-radial-grid.json
+++ b/apps/www/public/registry/styles/default/chart-radial-grid.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-grid",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-grid.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radial-label.json b/apps/www/public/registry/styles/default/chart-radial-label.json
index d0646ffe2f..18b356087f 100644
--- a/apps/www/public/registry/styles/default/chart-radial-label.json
+++ b/apps/www/public/registry/styles/default/chart-radial-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radial-shape.json b/apps/www/public/registry/styles/default/chart-radial-shape.json
index 8351f82dd4..8079419730 100644
--- a/apps/www/public/registry/styles/default/chart-radial-shape.json
+++ b/apps/www/public/registry/styles/default/chart-radial-shape.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-shape",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-shape.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radial-simple.json b/apps/www/public/registry/styles/default/chart-radial-simple.json
index 15481303e7..1f0db75540 100644
--- a/apps/www/public/registry/styles/default/chart-radial-simple.json
+++ b/apps/www/public/registry/styles/default/chart-radial-simple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-simple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-simple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radial-stacked.json b/apps/www/public/registry/styles/default/chart-radial-stacked.json
index 99ba667371..2d6f7a5b79 100644
--- a/apps/www/public/registry/styles/default/chart-radial-stacked.json
+++ b/apps/www/public/registry/styles/default/chart-radial-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-radial-text.json b/apps/www/public/registry/styles/default/chart-radial-text.json
index 70563128ed..a3d048e283 100644
--- a/apps/www/public/registry/styles/default/chart-radial-text.json
+++ b/apps/www/public/registry/styles/default/chart-radial-text.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-text",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-text.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/default/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-advanced.json b/apps/www/public/registry/styles/default/chart-tooltip-advanced.json
index cdaa4baccb..8aaa8dcf9f 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-advanced.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-advanced.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-advanced",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-advanced.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                          Total\n                          <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"font-normal text-muted-foreground\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-default.json b/apps/www/public/registry/styles/default/chart-tooltip-default.json
index 52ab04b116..69f3552ea8 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-default.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-formatter.json b/apps/www/public/registry/styles/default/chart-tooltip-formatter.json
index 93f5ade245..f5816a8c1b 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-formatter.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-formatter.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-formatter",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-formatter.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-icons.json b/apps/www/public/registry/styles/default/chart-tooltip-icons.json
index e536d04efb..35cdde5bdd 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-icons.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-icons.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-icons",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-icons.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-indicator-line.json b/apps/www/public/registry/styles/default/chart-tooltip-indicator-line.json
index 197c5146ea..7726ee5c0b 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-indicator-line.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-indicator-line.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-indicator-line",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-indicator-line.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-indicator-none.json b/apps/www/public/registry/styles/default/chart-tooltip-indicator-none.json
index e449fa229d..3d0cf37f9b 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-indicator-none.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-indicator-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-indicator-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-indicator-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-label-custom.json b/apps/www/public/registry/styles/default/chart-tooltip-label-custom.json
index 8414023ef6..9a82be0f27 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-label-custom.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-label-formatter.json b/apps/www/public/registry/styles/default/chart-tooltip-label-formatter.json
index 1261477721..44de740fbd 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-label-formatter.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-label-formatter.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-label-formatter",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-label-formatter.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart-tooltip-label-none.json b/apps/www/public/registry/styles/default/chart-tooltip-label-none.json
index bd8bed3e99..2261fe81d3 100644
--- a/apps/www/public/registry/styles/default/chart-tooltip-label-none.json
+++ b/apps/www/public/registry/styles/default/chart-tooltip-label-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-label-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-label-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/chart.json b/apps/www/public/registry/styles/default/chart.json
index 436a779810..b1574c1551 100644
--- a/apps/www/public/registry/styles/default/chart.json
+++ b/apps/www/public/registry/styles/default/chart.json
@@ -1,6 +1,6 @@
 {
   "name": "chart",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "recharts",
     "lucide-react"
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/chart.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([_, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/charts-01.json b/apps/www/public/registry/styles/default/charts-01.json
index 61c18dc6c7..0d1bd8ed3d 100644
--- a/apps/www/public/registry/styles/default/charts-01.json
+++ b/apps/www/public/registry/styles/default/charts-01.json
@@ -1,13 +1,13 @@
 {
   "name": "charts-01",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "chart"
   ],
   "files": [
     {
       "path": "block/charts-01.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Line,\n  LineChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  Rectangle,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/default/ui/chart\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nexport const description = \"A collection of health charts.\"\n\nexport const iframeHeight = \"900px\"\n\nexport const containerClassName = \"min-h-screen py-12\"\n\nexport default function Charts() {\n  return (\n    <div className=\"chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8\">\n      <div className=\"grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]\">\n        <Card\n          x-chunk=\"A bar chart showing the number of steps you have walked in the past 7 days.\"\n          className=\"lg:max-w-md\"\n        >\n          <CardHeader className=\"space-y-0 pb-2\">\n            <CardDescription>Today</CardDescription>\n            <CardTitle className=\"text-4xl tabular-nums\">\n              12,584{\" \"}\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                steps\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: -4,\n                  right: -4,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={5}\n                  fillOpacity={0.6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <ChartTooltip\n                  defaultIndex={2}\n                  content={\n                    <ChartTooltipContent\n                      hideIndicator\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n                <ReferenceLine\n                  y={1200}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeDasharray=\"3 3\"\n                  strokeWidth={1}\n                >\n                  <Label\n                    position=\"insideBottomLeft\"\n                    value=\"Average Steps\"\n                    offset={10}\n                    fill=\"hsl(var(--foreground))\"\n                  />\n                  <Label\n                    position=\"insideTopLeft\"\n                    value=\"12,343\"\n                    className=\"text-lg\"\n                    fill=\"hsl(var(--foreground))\"\n                    offset={10}\n                    startOffset={100}\n                  />\n                </ReferenceLine>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex-col items-start gap-1\">\n            <CardDescription>\n              Over the past 7 days, you have walked{\" \"}\n              <span className=\"font-medium text-foreground\">53,305</span> steps.\n            </CardDescription>\n            <CardDescription>\n              You need{\" \"}\n              <span className=\"font-medium text-foreground\">12,584</span> more\n              steps to reach your goal.\n            </CardDescription>\n          </CardFooter>\n        </Card>\n        <Card\n          x-chunk=\"A line chart showing the resting heart rate for the past 7 days.\"\n          className=\"flex flex-col lg:max-w-md\"\n        >\n          <CardHeader className=\"flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1\">\n            <div>\n              <CardDescription>Resting HR</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                62\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  bpm\n                </span>\n              </CardTitle>\n            </div>\n            <div>\n              <CardDescription>Variability</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                35\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  ms\n                </span>\n              </CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent className=\"flex flex-1 items-center\">\n            <ChartContainer\n              config={{\n                resting: {\n                  label: \"Resting\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"w-full\"\n            >\n              <LineChart\n                accessibilityLayer\n                margin={{\n                  left: 14,\n                  right: 14,\n                  top: 10,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    resting: 72,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    resting: 35,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    resting: 52,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    resting: 70,\n                  },\n                ]}\n              >\n                <CartesianGrid\n                  strokeDasharray=\"4 4\"\n                  vertical={false}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeOpacity={0.5}\n                />\n                <YAxis hide domain={[\"dataMin - 10\", \"dataMax + 10\"]} />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={8}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <Line\n                  dataKey=\"resting\"\n                  type=\"natural\"\n                  fill=\"var(--color-resting)\"\n                  stroke=\"var(--color-resting)\"\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    fill: \"var(--color-resting)\",\n                    stroke: \"var(--color-resting)\",\n                    r: 4,\n                  }}\n                />\n                <ChartTooltip\n                  content={\n                    <ChartTooltipContent\n                      indicator=\"line\"\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n              </LineChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6 lg:max-w-[20rem]\">\n        <Card\n          x-chunk=\"Two horizontal bar charts showing total steps taken during the current year and last year.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader>\n            <CardTitle>Progress</CardTitle>\n            <CardDescription>\n              You're average more steps a day this year than last year.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"grid gap-4\">\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                12,453\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--chart-1))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2024\",\n                      steps: 12435,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"white\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                10,103\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--muted))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2023\",\n                      steps: 10103,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"hsl(var(--muted-foreground))\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing the walking and running distance for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Walking Distance</CardTitle>\n            <CardDescription>\n              Over the last 7 days, your distance walked and run was 12.5 miles\n              per day.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-0\">\n            <div className=\"flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none\">\n              12.5\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                miles/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[72px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing move, exercise, and stand progress.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4 pb-2\">\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"h-[140px] w-full\"\n            >\n              <BarChart\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    label: \"8/12 hr\",\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    label: \"46/60 min\",\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    label: \"245/360 kcal\",\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                layout=\"vertical\"\n                barSize={32}\n                barGap={2}\n              >\n                <XAxis type=\"number\" dataKey=\"value\" hide />\n                <YAxis\n                  dataKey=\"activity\"\n                  type=\"category\"\n                  tickLine={false}\n                  tickMargin={4}\n                  axisLine={false}\n                  className=\"capitalize\"\n                />\n                <Bar dataKey=\"value\" radius={5}>\n                  <LabelList\n                    position=\"insideLeft\"\n                    dataKey=\"label\"\n                    fill=\"white\"\n                    offset={8}\n                    fontSize={12}\n                  />\n                </Bar>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex flex-row border-t p-4\">\n            <div className=\"flex w-full items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  562\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  73\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  14\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n          </CardFooter>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6\">\n        <Card\n          x-chunk=\"A radial bar chart showing the percentage of time spent moving, exercising, and standing.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4\">\n            <div className=\"grid items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  562/600\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  73/120\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  8/12\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"mx-auto aspect-square w-full max-w-[80%]\"\n            >\n              <RadialBarChart\n                margin={{\n                  left: -10,\n                  right: -10,\n                  top: -10,\n                  bottom: -10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                innerRadius=\"20%\"\n                barSize={24}\n                startAngle={90}\n                endAngle={450}\n              >\n                <PolarAngleAxis\n                  type=\"number\"\n                  domain={[0, 100]}\n                  dataKey=\"value\"\n                  tick={false}\n                />\n                <RadialBar dataKey=\"value\" background cornerRadius={5} />\n              </RadialBarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing active energy in the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Active Energy</CardTitle>\n            <CardDescription>\n              You're burning an average of 754 calories per day. Good job!\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-2\">\n            <div className=\"flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none\">\n              1,254\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                kcal/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                calories: {\n                  label: \"Calories\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[64px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    calories: 354,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    calories: 514,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    calories: 345,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    calories: 734,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    calories: 645,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    calories: 456,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    calories: 345,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"calories\"\n                  fill=\"var(--color-calories)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"An area chart showing the time spent in bed for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"space-y-0 pb-0\">\n            <CardDescription>Time in Bed</CardDescription>\n            <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n              8\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                hr\n              </span>\n              35\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                min\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"p-0\">\n            <ChartContainer\n              config={{\n                time: {\n                  label: \"Time\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n              }}\n            >\n              <AreaChart\n                accessibilityLayer\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    time: 8.5,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    time: 7.2,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    time: 6.2,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    time: 5.2,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    time: 7.0,\n                  },\n                ]}\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n              >\n                <XAxis dataKey=\"date\" hide />\n                <YAxis domain={[\"dataMin - 5\", \"dataMax + 2\"]} hide />\n                <defs>\n                  <linearGradient id=\"fillTime\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"5%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  dataKey=\"time\"\n                  type=\"natural\"\n                  fill=\"url(#fillTime)\"\n                  fillOpacity={0.4}\n                  stroke=\"var(--color-time)\"\n                />\n                <ChartTooltip\n                  cursor={false}\n                  content={<ChartTooltipContent hideLabel />}\n                  formatter={(value) => (\n                    <div className=\"flex min-w-[120px] items-center text-xs text-muted-foreground\">\n                      Time in bed\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          hr\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              </AreaChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/checkbox.json b/apps/www/public/registry/styles/default/checkbox.json
index 4ef919550e..a61d615cfd 100644
--- a/apps/www/public/registry/styles/default/checkbox.json
+++ b/apps/www/public/registry/styles/default/checkbox.json
@@ -1,13 +1,13 @@
 {
   "name": "checkbox",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-checkbox"
   ],
   "files": [
     {
       "path": "ui/checkbox.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/collapsible.json b/apps/www/public/registry/styles/default/collapsible.json
index e2863602f6..aa30ab5459 100644
--- a/apps/www/public/registry/styles/default/collapsible.json
+++ b/apps/www/public/registry/styles/default/collapsible.json
@@ -1,13 +1,13 @@
 {
   "name": "collapsible",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-collapsible"
   ],
   "files": [
     {
       "path": "ui/collapsible.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/command.json b/apps/www/public/registry/styles/default/command.json
index 80a69546ba..a1b34ffbe2 100644
--- a/apps/www/public/registry/styles/default/command.json
+++ b/apps/www/public/registry/styles/default/command.json
@@ -1,6 +1,6 @@
 {
   "name": "command",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "cmdk@1.0.0"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/default/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/context-menu.json b/apps/www/public/registry/styles/default/context-menu.json
index 80fe401ebd..9f018f4d6d 100644
--- a/apps/www/public/registry/styles/default/context-menu.json
+++ b/apps/www/public/registry/styles/default/context-menu.json
@@ -1,13 +1,13 @@
 {
   "name": "context-menu",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-context-menu"
   ],
   "files": [
     {
       "path": "ui/context-menu.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/dashboard-01.json b/apps/www/public/registry/styles/default/dashboard-01.json
index ce30d3e3bc..0f81412927 100644
--- a/apps/www/public/registry/styles/default/dashboard-01.json
+++ b/apps/www/public/registry/styles/default/dashboard-01.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-01",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "dropdown-menu",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/dashboard-01.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\nimport {\n  Activity,\n  ArrowUpRight,\n  CircleUser,\n  CreditCard,\n  DollarSign,\n  Menu,\n  Package2,\n  Search,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\n\nexport const description =\n  \"An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image.\"\n\nexport const iframeHeight = \"825px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Analytics\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Analytics\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n        <div className=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n          <Card x-chunk=\"A card showing the total revenue in USD and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Total Revenue\n              </CardTitle>\n              <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">$45,231.89</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +20.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total subscriptions and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Subscriptions\n              </CardTitle>\n              <Users className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+2350</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +180.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total sales and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n              <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+12,234</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +19% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total active users and the percentage difference from last hour.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n              <Activity className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+573</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +201 since last hour\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n          <Card\n            className=\"xl:col-span-2\"\n            x-chunk=\"A card showing a table of recent transactions with a link to view all transactions.\"\n          >\n            <CardHeader className=\"flex flex-row items-center\">\n              <div className=\"grid gap-2\">\n                <CardTitle>Transactions</CardTitle>\n                <CardDescription>\n                  Recent transactions from your store.\n                </CardDescription>\n              </div>\n              <Button asChild size=\"sm\" className=\"ml-auto gap-1\">\n                <Link href=\"#\">\n                  View All\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Link>\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead>Customer</TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Type\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Status\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Date\n                    </TableHead>\n                    <TableHead className=\"text-right\">Amount</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-23\n                    </TableCell>\n                    <TableCell className=\"text-right\">$250.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Olivia Smith</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        olivia@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Refund\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Declined\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-24\n                    </TableCell>\n                    <TableCell className=\"text-right\">$150.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Noah Williams</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        noah@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Subscription\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-25\n                    </TableCell>\n                    <TableCell className=\"text-right\">$350.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Emma Brown</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        emma@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-26\n                    </TableCell>\n                    <TableCell className=\"text-right\">$450.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-27\n                    </TableCell>\n                    <TableCell className=\"text-right\">$550.00</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing a list of recent sales with customer names and email addresses.\">\n            <CardHeader>\n              <CardTitle>Recent Sales</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-8\">\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                  <AvatarFallback>OM</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Olivia Martin\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    olivia.martin@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$1,999.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                  <AvatarFallback>JL</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Jackson Lee\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    jackson.lee@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                  <AvatarFallback>IN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Isabella Nguyen\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    isabella.nguyen@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$299.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                  <AvatarFallback>WK</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    William Kim\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    will@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$99.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                  <AvatarFallback>SD</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Sofia Davis\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    sofia.davis@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </main>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/dashboard-02.json b/apps/www/public/registry/styles/default/dashboard-02.json
index 46b797eb3e..86f5230810 100644
--- a/apps/www/public/registry/styles/default/dashboard-02.json
+++ b/apps/www/public/registry/styles/default/dashboard-02.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-02",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "button",
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "block/dashboard-02.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\nimport {\n  Bell,\n  CircleUser,\n  Home,\n  LineChart,\n  Menu,\n  Package,\n  Package2,\n  Search,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\n\nexport const description =\n  \"A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.\"\n\nexport const iframeHeight = \"800px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n      <div className=\"hidden border-r bg-muted/40 md:block\">\n        <div className=\"flex h-full max-h-screen flex-col gap-2\">\n          <div className=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n            <Link href=\"/\" className=\"flex items-center gap-2 font-semibold\">\n              <Package2 className=\"h-6 w-6\" />\n              <span className=\"\">Acme Inc</span>\n            </Link>\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto h-8 w-8\">\n              <Bell className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle notifications</span>\n            </Button>\n          </div>\n          <div className=\"flex-1\">\n            <nav className=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Home className=\"h-4 w-4\" />\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <ShoppingCart className=\"h-4 w-4\" />\n                Orders\n                <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n              >\n                <Package className=\"h-4 w-4\" />\n                Products{\" \"}\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Users className=\"h-4 w-4\" />\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <LineChart className=\"h-4 w-4\" />\n                Analytics\n              </Link>\n            </nav>\n          </div>\n          <div className=\"mt-auto p-4\">\n            <Card x-chunk=\"A card with a call to action\">\n              <CardHeader className=\"p-2 pt-0 md:p-4\">\n                <CardTitle>Upgrade to Pro</CardTitle>\n                <CardDescription>\n                  Unlock all features and get unlimited access to our support\n                  team.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-2 pt-0 md:p-4 md:pt-0\">\n                <Button size=\"sm\" className=\"w-full\">\n                  Upgrade\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-col\">\n        <header className=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"shrink-0 md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"flex flex-col\">\n              <nav className=\"grid gap-2 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-lg font-semibold\"\n                >\n                  <Package2 className=\"h-6 w-6\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                  <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                    6\n                  </Badge>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Analytics\n                </Link>\n              </nav>\n              <div className=\"mt-auto\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Upgrade to Pro</CardTitle>\n                    <CardDescription>\n                      Unlock all features and get unlimited access to our\n                      support team.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Button size=\"sm\" className=\"w-full\">\n                      Upgrade\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </SheetContent>\n          </Sheet>\n          <div className=\"w-full flex-1\">\n            <form>\n              <div className=\"relative\">\n                <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n                <Input\n                  type=\"search\"\n                  placeholder=\"Search products...\"\n                  className=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n                />\n              </div>\n            </form>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n          <div className=\"flex items-center\">\n            <h1 className=\"text-lg font-semibold md:text-2xl\">Inventory</h1>\n          </div>\n          <div\n            x-chunk=\"An empty state showing no products with a heading, description and a call to action to add a product.\"\n            className=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\"\n          >\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <h3 className=\"text-2xl font-bold tracking-tight\">\n                You have no products\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                You can start selling as soon as you add a product.\n              </p>\n              <Button className=\"mt-4\">Add Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/dashboard-03.json b/apps/www/public/registry/styles/default/dashboard-03.json
index 3d8e52e299..e2f9ff24cd 100644
--- a/apps/www/public/registry/styles/default/dashboard-03.json
+++ b/apps/www/public/registry/styles/default/dashboard-03.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-03",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "button",
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "block/dashboard-03.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import {\n  Bird,\n  Book,\n  Bot,\n  Code2,\n  CornerDownLeft,\n  LifeBuoy,\n  Mic,\n  Paperclip,\n  Rabbit,\n  Settings,\n  Settings2,\n  Share,\n  SquareTerminal,\n  SquareUser,\n  Triangle,\n  Turtle,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport const description =\n  \"An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.\"\n\nexport const iframeHeight = \"740px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid h-screen w-full pl-[56px]\">\n      <aside className=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n        <div className=\"border-b p-2\">\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n            <Triangle className=\"size-5 fill-foreground\" />\n          </Button>\n        </div>\n        <nav className=\"grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Playground\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Models\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              API\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Help\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col\">\n        <header className=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n          <h1 className=\"text-xl font-semibold\">Playground</h1>\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\">\n                <Settings className=\"size-4\" />\n                <span className=\"sr-only\">Settings</span>\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"max-h-[80vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Configuration</DrawerTitle>\n                <DrawerDescription>\n                  Configure the settings for the model and messages.\n                </DrawerDescription>\n              </DrawerHeader>\n              <form className=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Settings\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"model\">Model</Label>\n                    <Select>\n                      <SelectTrigger\n                        id=\"model\"\n                        className=\"items-start [&_[data-description]]:hidden\"\n                      >\n                        <SelectValue placeholder=\"Select a model\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"genesis\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Rabbit className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Genesis\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Our fastest model for general use cases.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"explorer\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Bird className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Explorer\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Performance and speed for efficiency.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"quantum\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Turtle className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Quantum\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                The most powerful model for complex\n                                computations.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"temperature\">Temperature</Label>\n                    <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </fieldset>\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Messages\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"role\">Role</Label>\n                    <Select defaultValue=\"system\">\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select a role\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"system\">System</SelectItem>\n                        <SelectItem value=\"user\">User</SelectItem>\n                        <SelectItem value=\"assistant\">Assistant</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"content\">Content</Label>\n                    <Textarea id=\"content\" placeholder=\"You are a...\" />\n                  </div>\n                </fieldset>\n              </form>\n            </DrawerContent>\n          </Drawer>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ml-auto gap-1.5 text-sm\"\n          >\n            <Share className=\"size-3.5\" />\n            Share\n          </Button>\n        </header>\n        <main className=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n          <div\n            className=\"relative hidden flex-col items-start gap-8 md:flex\"\n            x-chunk=\"A settings form a configuring an AI model and messages.\"\n          >\n            <form className=\"grid w-full items-start gap-6\">\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      className=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              The most powerful model for complex computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </div>\n              </fieldset>\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"role\">Role</Label>\n                  <Select defaultValue=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">System</SelectItem>\n                      <SelectItem value=\"user\">User</SelectItem>\n                      <SelectItem value=\"assistant\">Assistant</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"content\">Content</Label>\n                  <Textarea\n                    id=\"content\"\n                    placeholder=\"You are a...\"\n                    className=\"min-h-[9.5rem]\"\n                  />\n                </div>\n              </fieldset>\n            </form>\n          </div>\n          <div className=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n            <Badge variant=\"outline\" className=\"absolute right-3 top-3\">\n              Output\n            </Badge>\n            <div className=\"flex-1\" />\n            <form\n              className=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\"\n              x-chunk=\"A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio.\"\n            >\n              <Label htmlFor=\"message\" className=\"sr-only\">\n                Message\n              </Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"Type your message here...\"\n                className=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n              />\n              <div className=\"flex items-center p-3 pt-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip className=\"size-4\" />\n                      <span className=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Attach File</TooltipContent>\n                </Tooltip>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic className=\"size-4\" />\n                      <span className=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Use Microphone</TooltipContent>\n                </Tooltip>\n                <Button type=\"submit\" size=\"sm\" className=\"ml-auto gap-1.5\">\n                  Send Message\n                  <CornerDownLeft className=\"size-3.5\" />\n                </Button>\n              </div>\n            </form>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/dashboard-04.json b/apps/www/public/registry/styles/default/dashboard-04.json
index c2c30682e1..05717e1d1b 100644
--- a/apps/www/public/registry/styles/default/dashboard-04.json
+++ b/apps/www/public/registry/styles/default/dashboard-04.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-04",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/dashboard-04.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\nimport { CircleUser, Menu, Package2, Search } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\n\nexport const description =\n  \"A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.\"\n\nexport const iframeHeight = \"780px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Settings\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Settings\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n        <div className=\"mx-auto grid w-full max-w-6xl gap-2\">\n          <h1 className=\"text-3xl font-semibold\">Settings</h1>\n        </div>\n        <div className=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n          <nav\n            className=\"grid gap-4 text-sm text-muted-foreground\"\n            x-chunk=\"A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.\"\n            x-chunk-container=\"chunk-container after:right-0\"\n          >\n            <Link href=\"#\" className=\"font-semibold text-primary\">\n              General\n            </Link>\n            <Link href=\"#\">Security</Link>\n            <Link href=\"#\">Integrations</Link>\n            <Link href=\"#\">Support</Link>\n            <Link href=\"#\">Organizations</Link>\n            <Link href=\"#\">Advanced</Link>\n          </nav>\n          <div className=\"grid gap-6\">\n            <Card x-chunk=\"A form to update the store name.\">\n              <CardHeader>\n                <CardTitle>Store Name</CardTitle>\n                <CardDescription>\n                  Used to identify your store in the marketplace.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Input placeholder=\"Store Name\" />\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n            <Card x-chunk=\"A form to update the plugins directory with a checkbox to allow administrators to change the directory.\">\n              <CardHeader>\n                <CardTitle>Plugins Directory</CardTitle>\n                <CardDescription>\n                  The directory within your project, in which your plugins are\n                  located.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form className=\"flex flex-col gap-4\">\n                  <Input\n                    placeholder=\"Project Name\"\n                    defaultValue=\"/content/plugins\"\n                  />\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"include\" defaultChecked />\n                    <label\n                      htmlFor=\"include\"\n                      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    >\n                      Allow administrators to change the directory.\n                    </label>\n                  </div>\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/dashboard-05.json b/apps/www/public/registry/styles/default/dashboard-05.json
index f1a34bae17..a73315c510 100644
--- a/apps/www/public/registry/styles/default/dashboard-05.json
+++ b/apps/www/public/registry/styles/default/dashboard-05.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-05",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "breadcrumb",
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "block/dashboard-05.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\"\nimport { Progress } from \"@/registry/default/ui/progress\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport const description =\n  \"An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.\"\n\nexport const iframeHeight = \"1112px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Orders</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n          <div className=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n              <Card\n                className=\"sm:col-span-2\"\n                x-chunk=\"A card for an orders dashboard with a description and a button to create a new order.\"\n              >\n                <CardHeader className=\"pb-3\">\n                  <CardTitle>Your Orders</CardTitle>\n                  <CardDescription className=\"max-w-lg text-balance leading-relaxed\">\n                    Introducing Our Dynamic Orders Dashboard for Seamless\n                    Management and Insightful Analysis.\n                  </CardDescription>\n                </CardHeader>\n                <CardFooter>\n                  <Button>Create New Order</Button>\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Week</CardDescription>\n                  <CardTitle className=\"text-4xl\">$1,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +25% from last week\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={25} aria-label=\"25% increase\" />\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Month</CardDescription>\n                  <CardTitle className=\"text-4xl\">$5,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +10% from last month\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={12} aria-label=\"12% increase\" />\n                </CardFooter>\n              </Card>\n            </div>\n            <Tabs defaultValue=\"week\">\n              <div className=\"flex items-center\">\n                <TabsList>\n                  <TabsTrigger value=\"week\">Week</TabsTrigger>\n                  <TabsTrigger value=\"month\">Month</TabsTrigger>\n                  <TabsTrigger value=\"year\">Year</TabsTrigger>\n                </TabsList>\n                <div className=\"ml-auto flex items-center gap-2\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"h-7 gap-1 text-sm\"\n                      >\n                        <ListFilter className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only sm:not-sr-only\">Filter</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuCheckboxItem checked>\n                        Fulfilled\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Declined\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Refunded\n                      </DropdownMenuCheckboxItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-7 gap-1 text-sm\"\n                  >\n                    <File className=\"h-3.5 w-3.5\" />\n                    <span className=\"sr-only sm:not-sr-only\">Export</span>\n                  </Button>\n                </div>\n              </div>\n              <TabsContent value=\"week\">\n                <Card x-chunk=\"A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.\">\n                  <CardHeader className=\"px-7\">\n                    <CardTitle>Orders</CardTitle>\n                    <CardDescription>\n                      Recent orders from your store.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead>Customer</TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Type\n                          </TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Status\n                          </TableHead>\n                          <TableHead className=\"hidden md:table-cell\">\n                            Date\n                          </TableHead>\n                          <TableHead className=\"text-right\">Amount</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow className=\"bg-accent\">\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Noah Williams</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              noah@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Subscription\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-25\n                          </TableCell>\n                          <TableCell className=\"text-right\">$350.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n          </div>\n          <div>\n            <Card\n              className=\"overflow-hidden\"\n              x-chunk=\"An order details card with order details, shipping information, customer information and payment information.\"\n            >\n              <CardHeader className=\"flex flex-row items-start bg-muted/50\">\n                <div className=\"grid gap-0.5\">\n                  <CardTitle className=\"group flex items-center gap-2 text-lg\">\n                    Order Oe31b70H\n                    <Button\n                      size=\"icon\"\n                      variant=\"outline\"\n                      className=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                    >\n                      <Copy className=\"h-3 w-3\" />\n                      <span className=\"sr-only\">Copy Order ID</span>\n                    </Button>\n                  </CardTitle>\n                  <CardDescription>Date: November 23, 2023</CardDescription>\n                </div>\n                <div className=\"ml-auto flex items-center gap-1\">\n                  <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                    <Truck className=\"h-3.5 w-3.5\" />\n                    <span className=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                      Track Order\n                    </span>\n                  </Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <MoreVertical className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">More</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem>Export</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>Trash</DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-6 text-sm\">\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Order Details</div>\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Glimmer Lamps x <span>2</span>\n                      </span>\n                      <span>$250.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Aqua Filters x <span>1</span>\n                      </span>\n                      <span>$49.00</span>\n                    </li>\n                  </ul>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Subtotal</span>\n                      <span>$299.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Shipping</span>\n                      <span>$5.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Tax</span>\n                      <span>$25.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between font-semibold\">\n                      <span className=\"text-muted-foreground\">Total</span>\n                      <span>$329.00</span>\n                    </li>\n                  </ul>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <div className=\"font-semibold\">Shipping Information</div>\n                    <address className=\"grid gap-0.5 not-italic text-muted-foreground\">\n                      <span>Liam Johnson</span>\n                      <span>1234 Main St.</span>\n                      <span>Anytown, CA 12345</span>\n                    </address>\n                  </div>\n                  <div className=\"grid auto-rows-max gap-3\">\n                    <div className=\"font-semibold\">Billing Information</div>\n                    <div className=\"text-muted-foreground\">\n                      Same as shipping address\n                    </div>\n                  </div>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Customer Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Customer</dt>\n                      <dd>Liam Johnson</dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Email</dt>\n                      <dd>\n                        <a href=\"mailto:\">liam@acme.com</a>\n                      </dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Phone</dt>\n                      <dd>\n                        <a href=\"tel:\">+1 234 567 890</a>\n                      </dd>\n                    </div>\n                  </dl>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Payment Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"flex items-center gap-1 text-muted-foreground\">\n                        <CreditCard className=\"h-4 w-4\" />\n                        Visa\n                      </dt>\n                      <dd>**** **** **** 4532</dd>\n                    </div>\n                  </dl>\n                </div>\n              </CardContent>\n              <CardFooter className=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n                <div className=\"text-xs text-muted-foreground\">\n                  Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n                </div>\n                <Pagination className=\"ml-auto mr-0 w-auto\">\n                  <PaginationContent>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronLeft className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Previous Order</span>\n                      </Button>\n                    </PaginationItem>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronRight className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Next Order</span>\n                      </Button>\n                    </PaginationItem>\n                  </PaginationContent>\n                </Pagination>\n              </CardFooter>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/dashboard-06.json b/apps/www/public/registry/styles/default/dashboard-06.json
index 1e9b8ba12a..8952b8eed8 100644
--- a/apps/www/public/registry/styles/default/dashboard-06.json
+++ b/apps/www/public/registry/styles/default/dashboard-06.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-06",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "breadcrumb",
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "block/dashboard-06.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport const description =\n  \"An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.\"\n\nexport const iframeHeight = \"938px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>All Products</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <Tabs defaultValue=\"all\">\n            <div className=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"all\">All</TabsTrigger>\n                <TabsTrigger value=\"active\">Active</TabsTrigger>\n                <TabsTrigger value=\"draft\">Draft</TabsTrigger>\n                <TabsTrigger value=\"archived\" className=\"hidden sm:flex\">\n                  Archived\n                </TabsTrigger>\n              </TabsList>\n              <div className=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"outline\" size=\"sm\" className=\"h-8 gap-1\">\n                      <ListFilter className=\"h-3.5 w-3.5\" />\n                      <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                        Filter\n                      </span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuCheckboxItem checked>\n                      Active\n                    </DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>\n                      Archived\n                    </DropdownMenuCheckboxItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                  <File className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Export\n                  </span>\n                </Button>\n                <Button size=\"sm\" className=\"h-8 gap-1\">\n                  <PlusCircle className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Add Product\n                  </span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"all\">\n              <Card x-chunk=\"A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.\">\n                <CardHeader>\n                  <CardTitle>Products</CardTitle>\n                  <CardDescription>\n                    Manage your products and view their sales performance.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead className=\"hidden w-[100px] sm:table-cell\">\n                          <span className=\"sr-only\">Image</span>\n                        </TableHead>\n                        <TableHead>Name</TableHead>\n                        <TableHead>Status</TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Price\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Total Sales\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Created at\n                        </TableHead>\n                        <TableHead>\n                          <span className=\"sr-only\">Actions</span>\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Laser Lemonade Machine\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Draft</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $499.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          25\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-07-12 10:42 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Hypernova Headphones\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $129.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          100\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-10-18 03:21 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          AeroGlow Desk Lamp\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $39.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          50\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-11-29 08:15 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          TechTonic Energy Drink\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"secondary\">Draft</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $2.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          0\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-12-25 11:59 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Gamer Gear Pro Controller\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $59.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          75\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-01-01 12:00 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Luminous VR Headset\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          $199.99\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          30\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-02-14 02:14 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter>\n                  <div className=\"text-xs text-muted-foreground\">\n                    Showing <strong>1-10</strong> of <strong>32</strong>{\" \"}\n                    products\n                  </div>\n                </CardFooter>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/dashboard-07.json b/apps/www/public/registry/styles/default/dashboard-07.json
index 2a4015b8dc..15a460dd20 100644
--- a/apps/www/public/registry/styles/default/dashboard-07.json
+++ b/apps/www/public/registry/styles/default/dashboard-07.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-07",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "breadcrumb",
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "block/dashboard-07.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/default/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport const description =\n  \"A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.\"\n\nexport const iframeHeight = \"1200px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Edit Product</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <div className=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <Button variant=\"outline\" size=\"icon\" className=\"h-7 w-7\">\n                <ChevronLeft className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Back</span>\n              </Button>\n              <h1 className=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n                Pro Controller\n              </h1>\n              <Badge variant=\"outline\" className=\"ml-auto sm:ml-0\">\n                In stock\n              </Badge>\n              <div className=\"hidden items-center gap-2 md:ml-auto md:flex\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">Save Product</Button>\n              </div>\n            </div>\n            <div className=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n              <div className=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product details\">\n                  <CardHeader>\n                    <CardTitle>Product Details</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"name\">Name</Label>\n                        <Input\n                          id=\"name\"\n                          type=\"text\"\n                          className=\"w-full\"\n                          defaultValue=\"Gamer Gear Pro Controller\"\n                        />\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"description\">Description</Label>\n                        <Textarea\n                          id=\"description\"\n                          defaultValue=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                          className=\"min-h-32\"\n                        />\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product stock and variants\">\n                  <CardHeader>\n                    <CardTitle>Stock</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead className=\"w-[100px]\">SKU</TableHead>\n                          <TableHead>Stock</TableHead>\n                          <TableHead>Price</TableHead>\n                          <TableHead className=\"w-[100px]\">Size</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-001\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-1\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-1\"\n                              type=\"number\"\n                              defaultValue=\"100\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-1\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-1\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-002\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-2\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-2\"\n                              type=\"number\"\n                              defaultValue=\"143\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-2\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-2\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"m\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-003\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-3\"\n                              type=\"number\"\n                              defaultValue=\"32\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"price-3\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                  <CardFooter className=\"justify-center border-t p-4\">\n                    <Button size=\"sm\" variant=\"ghost\" className=\"gap-1\">\n                      <PlusCircle className=\"h-3.5 w-3.5\" />\n                      Add Variant\n                    </Button>\n                  </CardFooter>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product category and subcategory\">\n                  <CardHeader>\n                    <CardTitle>Product Category</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6 sm:grid-cols-3\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"category\">Category</Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"category\"\n                            aria-label=\"Select category\"\n                          >\n                            <SelectValue placeholder=\"Select category\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"clothing\">Clothing</SelectItem>\n                            <SelectItem value=\"electronics\">\n                              Electronics\n                            </SelectItem>\n                            <SelectItem value=\"accessories\">\n                              Accessories\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"subcategory\">\n                          Subcategory (optional)\n                        </Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"subcategory\"\n                            aria-label=\"Select subcategory\"\n                          >\n                            <SelectValue placeholder=\"Select subcategory\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"t-shirts\">T-Shirts</SelectItem>\n                            <SelectItem value=\"hoodies\">Hoodies</SelectItem>\n                            <SelectItem value=\"sweatshirts\">\n                              Sweatshirts\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </div>\n              <div className=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product status\">\n                  <CardHeader>\n                    <CardTitle>Product Status</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"status\">Status</Label>\n                        <Select>\n                          <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                            <SelectValue placeholder=\"Select status\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"draft\">Draft</SelectItem>\n                            <SelectItem value=\"published\">Active</SelectItem>\n                            <SelectItem value=\"archived\">Archived</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card\n                  className=\"overflow-hidden\"\n                  x-chunk=\"A card with a form to upload product images\"\n                >\n                  <CardHeader>\n                    <CardTitle>Product Images</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-2\">\n                      <Image\n                        alt=\"Product image\"\n                        className=\"aspect-square w-full rounded-md object-cover\"\n                        height=\"300\"\n                        src=\"/placeholder.svg\"\n                        width=\"300\"\n                      />\n                      <div className=\"grid grid-cols-3 gap-2\">\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button className=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                          <Upload className=\"h-4 w-4 text-muted-foreground\" />\n                          <span className=\"sr-only\">Upload</span>\n                        </button>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a call to action to archive the product\">\n                  <CardHeader>\n                    <CardTitle>Archive Product</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div></div>\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Archive Product\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-center gap-2 md:hidden\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">Save Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/default/dialog.json b/apps/www/public/registry/styles/default/dialog.json
index b27891459d..07a1fca375 100644
--- a/apps/www/public/registry/styles/default/dialog.json
+++ b/apps/www/public/registry/styles/default/dialog.json
@@ -1,13 +1,13 @@
 {
   "name": "dialog",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/dialog.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/drawer.json b/apps/www/public/registry/styles/default/drawer.json
index 2a5e2ceabf..714a3f6031 100644
--- a/apps/www/public/registry/styles/default/drawer.json
+++ b/apps/www/public/registry/styles/default/drawer.json
@@ -1,6 +1,6 @@
 {
   "name": "drawer",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "vaul",
     "@radix-ui/react-dialog"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "ui/drawer.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n)\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Overlay\n    ref={ref}\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      {children}\n    </DrawerPrimitive.Content>\n  </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/dropdown-menu.json b/apps/www/public/registry/styles/default/dropdown-menu.json
index 9de4875ae8..3f70f4f873 100644
--- a/apps/www/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/public/registry/styles/default/dropdown-menu.json
@@ -1,13 +1,13 @@
 {
   "name": "dropdown-menu",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-dropdown-menu"
   ],
   "files": [
     {
       "path": "ui/dropdown-menu.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/form.json b/apps/www/public/registry/styles/default/form.json
index 7cfaadc2f8..21f2dbcc3c 100644
--- a/apps/www/public/registry/styles/default/form.json
+++ b/apps/www/public/registry/styles/default/form.json
@@ -1,6 +1,6 @@
 {
   "name": "form",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-label",
     "@radix-ui/react-slot",
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "ui/form.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/hello-block.json b/apps/www/public/registry/styles/default/hello-block.json
index 00024fa73d..96c4d18f20 100644
--- a/apps/www/public/registry/styles/default/hello-block.json
+++ b/apps/www/public/registry/styles/default/hello-block.json
@@ -1,15 +1,21 @@
 {
   "name": "hello-block",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
-    "use-media-query"
+    "use-media-query",
+    "card"
   ],
   "files": [
     {
-      "path": "block/hello-block.tsx",
-      "type": "components:block",
-      "content": "\"use client\"\n\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\"\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ExampleBlock() {\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <div\n      className={cn(\n        \"shadow-brand p-12\",\n        isDesktop\n          ? \"bg-muted text-muted-foreground\"\n          : \"bg-primary text-primary-foreground\"\n      )}\n    >\n      <Button className=\"bg-brand-primary border-brand-secondary border-4\">\n        A button\n      </Button>\n    </div>\n  )\n}\n"
+      "path": "block/hello-block/hello-block.tsx",
+      "type": "registry:block",
+      "content": "\"use client\"\n\nimport { HelloCard } from \"@/registry/default/block/hello-block/components/hello-card\"\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\"\nimport { cn } from \"@/registry/default/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function HelloBlock() {\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <HelloCard\n      title=\"Hello Block\"\n      className={cn(\n        \"p-12\",\n        isDesktop\n          ? \"bg-muted text-muted-foreground\"\n          : \"bg-primary text-primary-foreground\"\n      )}\n    >\n      <p>Hello. This is a component inside a block.</p>\n      <p>You are currently on {isDesktop ? \"desktop\" : \"mobile\"}</p>\n      <Button>Click me</Button>\n    </HelloCard>\n  )\n}\n"
+    },
+    {
+      "path": "block/hello-block/components/hello-card.tsx",
+      "type": "registry:block",
+      "content": "import {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\n\nexport function HelloCard({\n  title,\n  children,\n  className,\n}: {\n  title: string\n} & React.ComponentProps<typeof Card>) {\n  return (\n    <Card className={className}>\n      <CardHeader>\n        <CardTitle className=\"text-brand-secondary text-4xl\">{title}</CardTitle>\n      </CardHeader>\n      <CardContent>{children}</CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
   "tailwind": {
diff --git a/apps/www/public/registry/styles/default/hover-card.json b/apps/www/public/registry/styles/default/hover-card.json
index 812f1b7e3f..ab83a79441 100644
--- a/apps/www/public/registry/styles/default/hover-card.json
+++ b/apps/www/public/registry/styles/default/hover-card.json
@@ -1,13 +1,13 @@
 {
   "name": "hover-card",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-hover-card"
   ],
   "files": [
     {
       "path": "ui/hover-card.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/index.json b/apps/www/public/registry/styles/default/index.json
index 4a719bbdef..d9f59b1fed 100644
--- a/apps/www/public/registry/styles/default/index.json
+++ b/apps/www/public/registry/styles/default/index.json
@@ -14,24 +14,11 @@
   ],
   "tailwind": {
     "config": {
-      "theme": {
-        "extend": {
-          "borderRadius": {
-            "lg": "var(--radius)",
-            "md": "calc(var(--radius) - 2px)",
-            "sm": "calc(var(--radius) - 4px)"
-          }
-        }
-      },
       "plugins": [
         "require(\"tailwindcss-animate\")"
       ]
     }
   },
-  "cssVars": {
-    "light": {
-      "--radius": "0.5rem"
-    }
-  },
+  "cssVars": {},
   "files": []
 }
\ No newline at end of file
diff --git a/apps/www/public/registry/styles/default/input-otp.json b/apps/www/public/registry/styles/default/input-otp.json
index 578eb74775..44049b91a7 100644
--- a/apps/www/public/registry/styles/default/input-otp.json
+++ b/apps/www/public/registry/styles/default/input-otp.json
@@ -1,13 +1,13 @@
 {
   "name": "input-otp",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "input-otp"
   ],
   "files": [
     {
       "path": "ui/input-otp.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Dot } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-2 ring-ring ring-offset-background\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <Dot />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/input.json b/apps/www/public/registry/styles/default/input.json
index 6dcd815b9c..2536368bf8 100644
--- a/apps/www/public/registry/styles/default/input.json
+++ b/apps/www/public/registry/styles/default/input.json
@@ -1,10 +1,10 @@
 {
   "name": "input",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/input.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/label.json b/apps/www/public/registry/styles/default/label.json
index f1e8aa16ca..56adaf9083 100644
--- a/apps/www/public/registry/styles/default/label.json
+++ b/apps/www/public/registry/styles/default/label.json
@@ -1,13 +1,13 @@
 {
   "name": "label",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-label"
   ],
   "files": [
     {
       "path": "ui/label.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/menubar.json b/apps/www/public/registry/styles/default/menubar.json
index 77335c891b..aa8ea9d0e5 100644
--- a/apps/www/public/registry/styles/default/menubar.json
+++ b/apps/www/public/registry/styles/default/menubar.json
@@ -1,13 +1,13 @@
 {
   "name": "menubar",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-menubar"
   ],
   "files": [
     {
       "path": "ui/menubar.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-10 items-center space-x-1 rounded-md border bg-background p-1\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/navigation-menu.json b/apps/www/public/registry/styles/default/navigation-menu.json
index 4cce8b3e05..af24800500 100644
--- a/apps/www/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/public/registry/styles/default/navigation-menu.json
@@ -1,13 +1,13 @@
 {
   "name": "navigation-menu",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-navigation-menu"
   ],
   "files": [
     {
       "path": "ui/navigation-menu.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/pagination.json b/apps/www/public/registry/styles/default/pagination.json
index e335d8aa15..8e4b606357 100644
--- a/apps/www/public/registry/styles/default/pagination.json
+++ b/apps/www/public/registry/styles/default/pagination.json
@@ -1,13 +1,13 @@
 {
   "name": "pagination",
-  "type": "components:ui",
+  "type": "registry:ui",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
       "path": "ui/pagination.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/default/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeft className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRight className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/popover.json b/apps/www/public/registry/styles/default/popover.json
index 2f49eb2e1a..df536a1d57 100644
--- a/apps/www/public/registry/styles/default/popover.json
+++ b/apps/www/public/registry/styles/default/popover.json
@@ -1,13 +1,13 @@
 {
   "name": "popover",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-popover"
   ],
   "files": [
     {
       "path": "ui/popover.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/progress.json b/apps/www/public/registry/styles/default/progress.json
index f27e58e796..5d7d2405c3 100644
--- a/apps/www/public/registry/styles/default/progress.json
+++ b/apps/www/public/registry/styles/default/progress.json
@@ -1,13 +1,13 @@
 {
   "name": "progress",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-progress"
   ],
   "files": [
     {
       "path": "ui/progress.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-4 w-full overflow-hidden rounded-full bg-secondary\",\n      className\n    )}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/radio-group.json b/apps/www/public/registry/styles/default/radio-group.json
index 59c83d5ad5..f31d16d9b4 100644
--- a/apps/www/public/registry/styles/default/radio-group.json
+++ b/apps/www/public/registry/styles/default/radio-group.json
@@ -1,13 +1,13 @@
 {
   "name": "radio-group",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-radio-group"
   ],
   "files": [
     {
       "path": "ui/radio-group.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/resizable.json b/apps/www/public/registry/styles/default/resizable.json
index f19d107f57..e442920a0b 100644
--- a/apps/www/public/registry/styles/default/resizable.json
+++ b/apps/www/public/registry/styles/default/resizable.json
@@ -1,13 +1,13 @@
 {
   "name": "resizable",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "react-resizable-panels"
   ],
   "files": [
     {
       "path": "ui/resizable.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/scroll-area.json b/apps/www/public/registry/styles/default/scroll-area.json
index 18bd7a5ca6..66c5ce5c15 100644
--- a/apps/www/public/registry/styles/default/scroll-area.json
+++ b/apps/www/public/registry/styles/default/scroll-area.json
@@ -1,13 +1,13 @@
 {
   "name": "scroll-area",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-scroll-area"
   ],
   "files": [
     {
       "path": "ui/scroll-area.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 flex-col border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/select.json b/apps/www/public/registry/styles/default/select.json
index 67415a759e..4eb1707113 100644
--- a/apps/www/public/registry/styles/default/select.json
+++ b/apps/www/public/registry/styles/default/select.json
@@ -1,13 +1,13 @@
 {
   "name": "select",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-select"
   ],
   "files": [
     {
       "path": "ui/select.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUp className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDown className=\"h-4 w-4\" />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/separator.json b/apps/www/public/registry/styles/default/separator.json
index afefd7cd15..dea3c142fa 100644
--- a/apps/www/public/registry/styles/default/separator.json
+++ b/apps/www/public/registry/styles/default/separator.json
@@ -1,13 +1,13 @@
 {
   "name": "separator",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-separator"
   ],
   "files": [
     {
       "path": "ui/separator.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/sheet.json b/apps/www/public/registry/styles/default/sheet.json
index 743b17c0dc..e2943c2805 100644
--- a/apps/www/public/registry/styles/default/sheet.json
+++ b/apps/www/public/registry/styles/default/sheet.json
@@ -1,13 +1,13 @@
 {
   "name": "sheet",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/sheet.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/skeleton.json b/apps/www/public/registry/styles/default/skeleton.json
index 6dbc848097..4f98f38b93 100644
--- a/apps/www/public/registry/styles/default/skeleton.json
+++ b/apps/www/public/registry/styles/default/skeleton.json
@@ -1,10 +1,10 @@
 {
   "name": "skeleton",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/skeleton.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/slider.json b/apps/www/public/registry/styles/default/slider.json
index 3494de5cf7..66148521e3 100644
--- a/apps/www/public/registry/styles/default/slider.json
+++ b/apps/www/public/registry/styles/default/slider.json
@@ -1,13 +1,13 @@
 {
   "name": "slider",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-slider"
   ],
   "files": [
     {
       "path": "ui/slider.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center\",\n      className\n    )}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderPrimitive.Root>\n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/sonner.json b/apps/www/public/registry/styles/default/sonner.json
index 4910558032..24efe1b36e 100644
--- a/apps/www/public/registry/styles/default/sonner.json
+++ b/apps/www/public/registry/styles/default/sonner.json
@@ -1,6 +1,6 @@
 {
   "name": "sonner",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "sonner",
     "next-themes"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "ui/sonner.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n          description: \"group-[.toast]:text-muted-foreground\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/switch.json b/apps/www/public/registry/styles/default/switch.json
index a5fe47b1d2..c39a7fc2eb 100644
--- a/apps/www/public/registry/styles/default/switch.json
+++ b/apps/www/public/registry/styles/default/switch.json
@@ -1,13 +1,13 @@
 {
   "name": "switch",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-switch"
   ],
   "files": [
     {
       "path": "ui/switch.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/table.json b/apps/www/public/registry/styles/default/table.json
index b41c6e4d40..2a6ad1e424 100644
--- a/apps/www/public/registry/styles/default/table.json
+++ b/apps/www/public/registry/styles/default/table.json
@@ -1,10 +1,10 @@
 {
   "name": "table",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/table.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/tabs.json b/apps/www/public/registry/styles/default/tabs.json
index 038dd82332..ba70a95cdf 100644
--- a/apps/www/public/registry/styles/default/tabs.json
+++ b/apps/www/public/registry/styles/default/tabs.json
@@ -1,13 +1,13 @@
 {
   "name": "tabs",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-tabs"
   ],
   "files": [
     {
       "path": "ui/tabs.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/textarea.json b/apps/www/public/registry/styles/default/textarea.json
index 3866e069a0..6a98fe61a7 100644
--- a/apps/www/public/registry/styles/default/textarea.json
+++ b/apps/www/public/registry/styles/default/textarea.json
@@ -1,10 +1,10 @@
 {
   "name": "textarea",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/textarea.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/toast.json b/apps/www/public/registry/styles/default/toast.json
index 1b35c2d456..cd56963396 100644
--- a/apps/www/public/registry/styles/default/toast.json
+++ b/apps/www/public/registry/styles/default/toast.json
@@ -1,23 +1,23 @@
 {
   "name": "toast",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-toast"
   ],
   "files": [
     {
       "path": "ui/toast.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n  return (\n    <ToastPrimitives.Root\n      ref={ref}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Action>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Action\n    ref={ref}\n    className={cn(\n      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive\",\n      className\n    )}\n    {...props}\n  />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Close>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Close\n    ref={ref}\n    className={cn(\n      \"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <X className=\"h-4 w-4\" />\n  </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Title>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Title\n    ref={ref}\n    className={cn(\"text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Description>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Description\n    ref={ref}\n    className={cn(\"text-sm opacity-90\", className)}\n    {...props}\n  />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n  type ToastProps,\n  type ToastActionElement,\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastClose,\n  ToastAction,\n}\n"
     },
     {
       "path": "ui/use-toast.ts",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n"
     },
     {
       "path": "ui/toaster.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/default/ui/toast\"\nimport { useToast } from \"@/registry/default/ui/use-toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} {...props}>\n            <div className=\"grid gap-1\">\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && (\n                <ToastDescription>{description}</ToastDescription>\n              )}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        )\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  )\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/toggle-group.json b/apps/www/public/registry/styles/default/toggle-group.json
index 0532240e46..a5806a219a 100644
--- a/apps/www/public/registry/styles/default/toggle-group.json
+++ b/apps/www/public/registry/styles/default/toggle-group.json
@@ -1,6 +1,6 @@
 {
   "name": "toggle-group",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/toggle-group.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/default/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\"flex items-center justify-center gap-1\", className)}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/toggle.json b/apps/www/public/registry/styles/default/toggle.json
index 4ec710cf36..9f8e65e978 100644
--- a/apps/www/public/registry/styles/default/toggle.json
+++ b/apps/www/public/registry/styles/default/toggle.json
@@ -1,13 +1,13 @@
 {
   "name": "toggle",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-toggle"
   ],
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/tooltip.json b/apps/www/public/registry/styles/default/tooltip.json
index 9bdbaff25b..167a40b3fe 100644
--- a/apps/www/public/registry/styles/default/tooltip.json
+++ b/apps/www/public/registry/styles/default/tooltip.json
@@ -1,13 +1,13 @@
 {
   "name": "tooltip",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-tooltip"
   ],
   "files": [
     {
       "path": "ui/tooltip.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/default/use-media-query.json b/apps/www/public/registry/styles/default/use-media-query.json
new file mode 100644
index 0000000000..d2b1781d52
--- /dev/null
+++ b/apps/www/public/registry/styles/default/use-media-query.json
@@ -0,0 +1,14 @@
+{
+  "name": "use-media-query",
+  "type": "registry:hook",
+  "dependencies": [
+    "@react-hook/window-size@1.0.3"
+  ],
+  "files": [
+    {
+      "path": "hooks/use-media-query.ts",
+      "type": "registry:hook",
+      "content": "import * as React from \"react\"\n\nexport function useMediaQuery(query: string) {\n  const [value, setValue] = React.useState(false)\n\n  React.useEffect(() => {\n    function onChange(event: MediaQueryListEvent) {\n      setValue(event.matches)\n    }\n\n    const result = matchMedia(query)\n    result.addEventListener(\"change\", onChange)\n    setValue(result.matches)\n\n    return () => result.removeEventListener(\"change\", onChange)\n  }, [query])\n\n  return value\n}\n"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/registry/styles/new-york/accordion.json b/apps/www/public/registry/styles/new-york/accordion.json
index 5932c25b73..ec23104a36 100644
--- a/apps/www/public/registry/styles/new-york/accordion.json
+++ b/apps/www/public/registry/styles/new-york/accordion.json
@@ -1,13 +1,13 @@
 {
   "name": "accordion",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-accordion"
   ],
   "files": [
     {
       "path": "ui/accordion.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/alert-dialog.json b/apps/www/public/registry/styles/new-york/alert-dialog.json
index 5bd87450cd..aad80bff93 100644
--- a/apps/www/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/public/registry/styles/new-york/alert-dialog.json
@@ -1,6 +1,6 @@
 {
   "name": "alert-dialog",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-alert-dialog"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/alert-dialog.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    />\n  </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold\", className)}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(buttonVariants(), className)}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      buttonVariants({ variant: \"outline\" }),\n      \"mt-2 sm:mt-0\",\n      className\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/alert.json b/apps/www/public/registry/styles/new-york/alert.json
index a35040f759..4991dac121 100644
--- a/apps/www/public/registry/styles/new-york/alert.json
+++ b/apps/www/public/registry/styles/new-york/alert.json
@@ -1,10 +1,10 @@
 {
   "name": "alert",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/alert.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/aspect-ratio.json b/apps/www/public/registry/styles/new-york/aspect-ratio.json
index 8dcf7cbe9f..f9d4d2d941 100644
--- a/apps/www/public/registry/styles/new-york/aspect-ratio.json
+++ b/apps/www/public/registry/styles/new-york/aspect-ratio.json
@@ -1,13 +1,13 @@
 {
   "name": "aspect-ratio",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-aspect-ratio"
   ],
   "files": [
     {
       "path": "ui/aspect-ratio.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/authentication-01.json b/apps/www/public/registry/styles/new-york/authentication-01.json
index cf9c4ece5c..0eb0e507db 100644
--- a/apps/www/public/registry/styles/new-york/authentication-01.json
+++ b/apps/www/public/registry/styles/new-york/authentication-01.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-01",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-01.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport const description =\n  \"A simple login form with email and password. The submit button says 'Sign in'.\"\n\nexport const iframeHeight = \"600px\"\n\nexport const containerClassName =\n  \"w-full h-screen flex items-center justify-center px-4\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"email\">Email</Label>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </div>\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">Sign in</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/authentication-02.json b/apps/www/public/registry/styles/new-york/authentication-02.json
index 6e30fac951..b6fb92bf76 100644
--- a/apps/www/public/registry/styles/new-york/authentication-02.json
+++ b/apps/www/public/registry/styles/new-york/authentication-02.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-02",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-02.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport const description =\n  \"A login form with email and password. There's an option to login with Google and a link to sign up if you don't have an account.\"\n\nexport const iframeHeight = \"600px\"\n\nexport const containerClassName =\n  \"w-full h-screen flex items-center justify-center px-4\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-2xl\">Login</CardTitle>\n        <CardDescription>\n          Enter your email below to login to your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center\">\n              <Label htmlFor=\"password\">Password</Label>\n              <Link href=\"#\" className=\"ml-auto inline-block text-sm underline\">\n                Forgot your password?\n              </Link>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Don&apos;t have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign up\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/authentication-03.json b/apps/www/public/registry/styles/new-york/authentication-03.json
index 5223459c26..48a04d9085 100644
--- a/apps/www/public/registry/styles/new-york/authentication-03.json
+++ b/apps/www/public/registry/styles/new-york/authentication-03.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-03",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-03.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport const description =\n  \"A sign up form with first name, last name, email and password inside a card. There's an option to sign up with GitHub and a link to login if you already have an account\"\n\nexport const iframeHeight = \"600px\"\n\nexport const containerClassName =\n  \"w-full h-screen flex items-center justify-center px-4\"\n\nexport default function LoginForm() {\n  return (\n    <Card className=\"mx-auto max-w-sm\">\n      <CardHeader>\n        <CardTitle className=\"text-xl\">Sign Up</CardTitle>\n        <CardDescription>\n          Enter your information to create an account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid gap-4\">\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"first-name\">First name</Label>\n              <Input id=\"first-name\" placeholder=\"Max\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"last-name\">Last name</Label>\n              <Input id=\"last-name\" placeholder=\"Robinson\" required />\n            </div>\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"password\">Password</Label>\n            <Input id=\"password\" type=\"password\" />\n          </div>\n          <Button type=\"submit\" className=\"w-full\">\n            Create an account\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Sign up with GitHub\n          </Button>\n        </div>\n        <div className=\"mt-4 text-center text-sm\">\n          Already have an account?{\" \"}\n          <Link href=\"#\" className=\"underline\">\n            Sign in\n          </Link>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/authentication-04.json b/apps/www/public/registry/styles/new-york/authentication-04.json
index 224af9acdd..bd3adb6a0b 100644
--- a/apps/www/public/registry/styles/new-york/authentication-04.json
+++ b/apps/www/public/registry/styles/new-york/authentication-04.json
@@ -1,6 +1,6 @@
 {
   "name": "authentication-04",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/authentication-04.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport const description =\n  \"A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.\"\n\nexport const iframeHeight = \"800px\"\n\nexport const containerClassName = \"w-full h-full p-4 lg:p-0\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n      <div className=\"flex items-center justify-center py-12\">\n        <div className=\"mx-auto grid w-[350px] gap-6\">\n          <div className=\"grid gap-2 text-center\">\n            <h1 className=\"text-3xl font-bold\">Login</h1>\n            <p className=\"text-balance text-muted-foreground\">\n              Enter your email below to login to your account\n            </p>\n          </div>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </div>\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center\">\n                <Label htmlFor=\"password\">Password</Label>\n                <Link\n                  href=\"/forgot-password\"\n                  className=\"ml-auto inline-block text-sm underline\"\n                >\n                  Forgot your password?\n                </Link>\n              </div>\n              <Input id=\"password\" type=\"password\" required />\n            </div>\n            <Button type=\"submit\" className=\"w-full\">\n              Login\n            </Button>\n            <Button variant=\"outline\" className=\"w-full\">\n              Login with Google\n            </Button>\n          </div>\n          <div className=\"mt-4 text-center text-sm\">\n            Don&apos;t have an account?{\" \"}\n            <Link href=\"#\" className=\"underline\">\n              Sign up\n            </Link>\n          </div>\n        </div>\n      </div>\n      <div className=\"hidden bg-muted lg:block\">\n        <Image\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          width=\"1920\"\n          height=\"1080\"\n          className=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/avatar.json b/apps/www/public/registry/styles/new-york/avatar.json
index 6da8b9c7e4..7d3cec0070 100644
--- a/apps/www/public/registry/styles/new-york/avatar.json
+++ b/apps/www/public/registry/styles/new-york/avatar.json
@@ -1,13 +1,13 @@
 {
   "name": "avatar",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-avatar"
   ],
   "files": [
     {
       "path": "ui/avatar.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/badge.json b/apps/www/public/registry/styles/new-york/badge.json
index 3219986bad..d3bc32964a 100644
--- a/apps/www/public/registry/styles/new-york/badge.json
+++ b/apps/www/public/registry/styles/new-york/badge.json
@@ -1,10 +1,10 @@
 {
   "name": "badge",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/badge.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/breadcrumb.json b/apps/www/public/registry/styles/new-york/breadcrumb.json
index 826471eb11..e651a997c3 100644
--- a/apps/www/public/registry/styles/new-york/breadcrumb.json
+++ b/apps/www/public/registry/styles/new-york/breadcrumb.json
@@ -1,13 +1,13 @@
 {
   "name": "breadcrumb",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/breadcrumb.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { ChevronRightIcon, DotsHorizontalIcon } from \"@radix-ui/react-icons\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:size-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRightIcon />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/button.json b/apps/www/public/registry/styles/new-york/button.json
index 475640805f..cc7a509f52 100644
--- a/apps/www/public/registry/styles/new-york/button.json
+++ b/apps/www/public/registry/styles/new-york/button.json
@@ -1,13 +1,13 @@
 {
   "name": "button",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-slot"
   ],
   "files": [
     {
       "path": "ui/button.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/calendar.json b/apps/www/public/registry/styles/new-york/calendar.json
index bb08d9b205..d1892f505a 100644
--- a/apps/www/public/registry/styles/new-york/calendar.json
+++ b/apps/www/public/registry/styles/new-york/calendar.json
@@ -1,6 +1,6 @@
 {
   "name": "calendar",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "react-day-picker@8.10.1",
     "date-fns"
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/card.json b/apps/www/public/registry/styles/new-york/card.json
index 5b6efa32e5..b5fb6d172d 100644
--- a/apps/www/public/registry/styles/new-york/card.json
+++ b/apps/www/public/registry/styles/new-york/card.json
@@ -1,10 +1,10 @@
 {
   "name": "card",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/card.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/carousel.json b/apps/www/public/registry/styles/new-york/carousel.json
index 3ab54678b3..d3baf2f504 100644
--- a/apps/www/public/registry/styles/new-york/carousel.json
+++ b/apps/www/public/registry/styles/new-york/carousel.json
@@ -1,6 +1,6 @@
 {
   "name": "carousel",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "embla-carousel-react"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/carousel.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = \"horizontal\",\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      {\n        ...opts,\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n      },\n      plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n      if (!api) {\n        return\n      }\n\n      setCanScrollPrev(api.canScrollPrev())\n      setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n      api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n      api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          scrollPrev()\n        } else if (event.key === \"ArrowRight\") {\n          event.preventDefault()\n          scrollNext()\n        }\n      },\n      [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n      if (!api || !setApi) {\n        return\n      }\n\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) {\n        return\n      }\n\n      onSelect(api)\n      api.on(\"reInit\", onSelect)\n      api.on(\"select\", onSelect)\n\n      return () => {\n        api?.off(\"select\", onSelect)\n      }\n    }, [api, onSelect])\n\n    return (\n      <CarouselContext.Provider\n        value={{\n          carouselRef,\n          api: api,\n          opts,\n          orientation:\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n          scrollPrev,\n          scrollNext,\n          canScrollPrev,\n          canScrollNext,\n        }}\n      >\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn(\"relative\", className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute  h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeftIcon className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute h-8 w-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRightIcon className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/chart-area-axes.json b/apps/www/public/registry/styles/new-york/chart-area-axes.json
index 89ee9caf71..71f3e50c38 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-axes.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-axes.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-axes",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-axes.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-default.json b/apps/www/public/registry/styles/new-york/chart-area-default.json
index 26de8e2231..a528a913f1 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-default.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-gradient.json b/apps/www/public/registry/styles/new-york/chart-area-gradient.json
index 34f8dac949..2232be0295 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-gradient.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-gradient.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-gradient",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-gradient.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-icons.json b/apps/www/public/registry/styles/new-york/chart-area-icons.json
index a22478f289..982f4b204c 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-icons.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-icons.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-icons",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-icons.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-interactive.json b/apps/www/public/registry/styles/new-york/chart-area-interactive.json
index 85cbe158f3..4fe927b3eb 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-interactive.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const now = new Date()\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    now.setDate(now.getDate() - daysToSubtract)\n    return date >= now\n  })\n\n  return (\n    <Card>\n      <CardHeader className=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n        <div className=\"grid flex-1 gap-1 text-center sm:text-left\">\n          <CardTitle>Area Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <Select value={timeRange} onValueChange={setTimeRange}>\n          <SelectTrigger\n            className=\"w-[160px] rounded-lg sm:ml-auto\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Last 3 months\" />\n          </SelectTrigger>\n          <SelectContent className=\"rounded-xl\">\n            <SelectItem value=\"90d\" className=\"rounded-lg\">\n              Last 3 months\n            </SelectItem>\n            <SelectItem value=\"30d\" className=\"rounded-lg\">\n              Last 30 days\n            </SelectItem>\n            <SelectItem value=\"7d\" className=\"rounded-lg\">\n              Last 7 days\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-legend.json b/apps/www/public/registry/styles/new-york/chart-area-legend.json
index 2758506bd6..87fc97d1a5 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-legend.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-legend.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-legend",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-legend.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-linear.json b/apps/www/public/registry/styles/new-york/chart-area-linear.json
index 1ccf32fb04..1e6535ca80 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-linear.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-linear.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-linear",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-linear.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-stacked-expand.json b/apps/www/public/registry/styles/new-york/chart-area-stacked-expand.json
index b077f1f466..45c25f4eba 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-stacked-expand.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-stacked-expand.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-stacked-expand",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-stacked-expand.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-3))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-stacked.json b/apps/www/public/registry/styles/new-york/chart-area-stacked.json
index a6d686a832..a299616002 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-stacked.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-area-step.json b/apps/www/public/registry/styles/new-york/chart-area-step.json
index 7ff4ca9a36..325aeb9709 100644
--- a/apps/www/public/registry/styles/new-york/chart-area-step.json
+++ b/apps/www/public/registry/styles/new-york/chart-area-step.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-area-step",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-area-step.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-active.json b/apps/www/public/registry/styles/new-york/chart-bar-active.json
index 64eef3c3fd..1c05841901 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-active.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-active.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-active",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-active.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-default.json b/apps/www/public/registry/styles/new-york/chart-bar-default.json
index 1f692a9599..42a9e316f4 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-default.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-horizontal.json b/apps/www/public/registry/styles/new-york/chart-bar-horizontal.json
index b8b25f4c71..69971b3c48 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-horizontal.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-horizontal.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-horizontal",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-horizontal.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-interactive.json b/apps/www/public/registry/styles/new-york/chart-bar-interactive.json
index 2fa5c3d27a..964b3454e8 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-interactive.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"An interactive bar chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-label-custom.json b/apps/www/public/registry/styles/new-york/chart-bar-label-custom.json
index d771f44243..b70a86faa9 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-label-custom.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  label: {\n    color: \"hsl(var(--background))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-[--color-label]\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-label.json b/apps/www/public/registry/styles/new-york/chart-bar-label.json
index a2899357cf..21aa55a739 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-label.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-mixed.json b/apps/www/public/registry/styles/new-york/chart-bar-mixed.json
index ef87cb3a7a..2a4a8f5bd0 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-mixed.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-mixed.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-mixed",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-mixed.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-multiple.json b/apps/www/public/registry/styles/new-york/chart-bar-multiple.json
index 630b2cc0dc..f6fc618aee 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-multiple.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-multiple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-multiple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-multiple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-negative.json b/apps/www/public/registry/styles/new-york/chart-bar-negative.json
index b330f10254..40605fd4cb 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-negative.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-negative.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-negative",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-negative.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={\n                    item.visitors > 0\n                      ? \"hsl(var(--chart-1))\"\n                      : \"hsl(var(--chart-2))\"\n                  }\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-bar-stacked.json b/apps/www/public/registry/styles/new-york/chart-bar-stacked.json
index 1217b9f5d8..3860d85dd1 100644
--- a/apps/www/public/registry/styles/new-york/chart-bar-stacked.json
+++ b/apps/www/public/registry/styles/new-york/chart-bar-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-bar-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-bar-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-default.json b/apps/www/public/registry/styles/new-york/chart-line-default.json
index 85cb128aee..590f0dc524 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-default.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-dots-colors.json b/apps/www/public/registry/styles/new-york/chart-line-dots-colors.json
index ac4aebaea7..3f25abd6a2 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-dots-colors.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-dots-colors.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-dots-colors",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-dots-colors.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-dots-custom.json b/apps/www/public/registry/styles/new-york/chart-line-dots-custom.json
index f764300b01..01a8801d6c 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-dots-custom.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-dots-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-dots-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-dots-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-dots.json b/apps/www/public/registry/styles/new-york/chart-line-dots.json
index b75f08fc85..d8f76012d5 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-dots.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-dots.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-dots",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-dots.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-interactive.json b/apps/www/public/registry/styles/new-york/chart-line-interactive.json
index 27982fcd06..a9894ebf6d 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-interactive.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"An interactive line chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg font-bold leading-none sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-label-custom.json b/apps/www/public/registry/styles/new-york/chart-line-label-custom.json
index 02b81ba0a7..548157914d 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-label-custom.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-label.json b/apps/www/public/registry/styles/new-york/chart-line-label.json
index 9e65b3ed89..c73bca2f46 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-label.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-linear.json b/apps/www/public/registry/styles/new-york/chart-line-linear.json
index 9776aa0852..33dcb733de 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-linear.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-linear.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-linear",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-linear.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-multiple.json b/apps/www/public/registry/styles/new-york/chart-line-multiple.json
index 9d418d2144..e895e6673f 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-multiple.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-multiple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-multiple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-multiple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-line-step.json b/apps/www/public/registry/styles/new-york/chart-line-step.json
index 89065ba636..f837ca538c 100644
--- a/apps/www/public/registry/styles/new-york/chart-line-step.json
+++ b/apps/www/public/registry/styles/new-york/chart-line-step.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-line-step",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-line-step.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-donut-active.json b/apps/www/public/registry/styles/new-york/chart-pie-donut-active.json
index d703245e0b..60031c7bf6 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-donut-active.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-donut-active.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-donut-active",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-donut-active.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-donut-text.json b/apps/www/public/registry/styles/new-york/chart-pie-donut-text.json
index fe8a6262bc..49b4d4c095 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-donut-text.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-donut-text.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-donut-text",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-donut-text.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-donut.json b/apps/www/public/registry/styles/new-york/chart-pie-donut.json
index 26ef37224d..f8acdcad00 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-donut.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-donut.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-donut",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-donut.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-interactive.json b/apps/www/public/registry/styles/new-york/chart-pie-interactive.json
index 3c67943a0d..1ea280445a 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-interactive.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-interactive.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-interactive",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-interactive.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-sm\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={activeIndex}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <g>\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                  <Sector\n                    {...props}\n                    outerRadius={outerRadius + 25}\n                    innerRadius={outerRadius + 12}\n                  />\n                </g>\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-label-custom.json b/apps/www/public/registry/styles/new-york/chart-pie-label-custom.json
index a07d6ecf0c..cde5f69fe7 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-label-custom.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-label-list.json b/apps/www/public/registry/styles/new-york/chart-pie-label-list.json
index d1ab83c406..98da7e339a 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-label-list.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-label-list.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-label-list",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-label-list.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-label.json b/apps/www/public/registry/styles/new-york/chart-pie-label.json
index 7c663c3900..4efc709d56 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-label.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-legend.json b/apps/www/public/registry/styles/new-york/chart-pie-legend.json
index 352f1628bc..297b08b997 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-legend.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-legend.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-legend",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-legend.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A pie chart with a legend\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart>\n            <Pie data={chartData} dataKey=\"visitors\" />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"browser\" />}\n              className=\"-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-separator-none.json b/apps/www/public/registry/styles/new-york/chart-pie-separator-none.json
index 51000e5946..fdc51e76e9 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-separator-none.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-separator-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-separator-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-separator-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-simple.json b/apps/www/public/registry/styles/new-york/chart-pie-simple.json
index 6b6f9ff2cb..6c17d3566e 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-simple.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-simple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-simple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-simple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-pie-stacked.json b/apps/www/public/registry/styles/new-york/chart-pie-stacked.json
index 144bc5e673..bec8fdca8a 100644
--- a/apps/www/public/registry/styles/new-york/chart-pie-stacked.json
+++ b/apps/www/public/registry/styles/new-york/chart-pie-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-pie-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-pie-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  february: {\n    label: \"February\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  march: {\n    label: \"March\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  april: {\n    label: \"April\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  may: {\n    label: \"May\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-default.json b/apps/www/public/registry/styles/new-york/chart-radar-default.json
index 6caa795fb5..386fda974e 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-default.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-dots.json b/apps/www/public/registry/styles/new-york/chart-radar-dots.json
index 882a00f21c..deebffbd67 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-dots.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-dots.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-dots",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-dots.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-fill.json b/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-fill.json
index f0fa7ef3f6..bc970e836a 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-fill.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-fill.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-circle-fill",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-circle-fill.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-[--color-desktop] opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-no-lines.json b/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-no-lines.json
index 4b5fa12d7b..5c3dd5594e 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-no-lines.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-grid-circle-no-lines.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-circle-no-lines",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-circle-no-lines.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-grid-circle.json b/apps/www/public/registry/styles/new-york/chart-radar-grid-circle.json
index 667af447e8..5709a94f95 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-grid-circle.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-grid-circle.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-circle",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-circle.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-grid-custom.json b/apps/www/public/registry/styles/new-york/chart-radar-grid-custom.json
index 0f7987a8b9..6641341f80 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-grid-custom.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-grid-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-grid-fill.json b/apps/www/public/registry/styles/new-york/chart-radar-grid-fill.json
index 7f0a3b2dc7..f94843e807 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-grid-fill.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-grid-fill.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-fill",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-fill.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-[--color-desktop] opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-grid-none.json b/apps/www/public/registry/styles/new-york/chart-radar-grid-none.json
index 60a03a0512..4fae257327 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-grid-none.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-grid-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-grid-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-grid-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-icons.json b/apps/www/public/registry/styles/new-york/chart-radar-icons.json
index 5e11f378fe..e00e064ce4 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-icons.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-icons.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-icons",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-icons.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-label-custom.json b/apps/www/public/registry/styles/new-york/chart-radar-label-custom.json
index 24cd747659..ce5f914738 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-label-custom.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-legend.json b/apps/www/public/registry/styles/new-york/chart-radar-legend.json
index 6bc5a9cb02..a784d66f6f 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-legend.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-legend.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-legend",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-legend.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-lines-only.json b/apps/www/public/registry/styles/new-york/chart-radar-lines-only.json
index f8f8616ebb..20d956406a 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-lines-only.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-lines-only.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-lines-only",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-lines-only.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-multiple.json b/apps/www/public/registry/styles/new-york/chart-radar-multiple.json
index f0a9d84c11..840f461643 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-multiple.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-multiple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-multiple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-multiple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radar-radius.json b/apps/www/public/registry/styles/new-york/chart-radar-radius.json
index 850643eb03..9bbb99ca46 100644
--- a/apps/www/public/registry/styles/new-york/chart-radar-radius.json
+++ b/apps/www/public/registry/styles/new-york/chart-radar-radius.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radar-radius",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radar-radius.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radial-grid.json b/apps/www/public/registry/styles/new-york/chart-radial-grid.json
index e430530d3a..686808eed2 100644
--- a/apps/www/public/registry/styles/new-york/chart-radial-grid.json
+++ b/apps/www/public/registry/styles/new-york/chart-radial-grid.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-grid",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-grid.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radial-label.json b/apps/www/public/registry/styles/new-york/chart-radial-label.json
index a86f0725d1..49b4cd8547 100644
--- a/apps/www/public/registry/styles/new-york/chart-radial-label.json
+++ b/apps/www/public/registry/styles/new-york/chart-radial-label.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-label",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-label.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radial-shape.json b/apps/www/public/registry/styles/new-york/chart-radial-shape.json
index 294f6a6960..06040408e1 100644
--- a/apps/www/public/registry/styles/new-york/chart-radial-shape.json
+++ b/apps/www/public/registry/styles/new-york/chart-radial-shape.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-shape",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-shape.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radial-simple.json b/apps/www/public/registry/styles/new-york/chart-radial-simple.json
index a7e4268b23..b0d8dcb3b0 100644
--- a/apps/www/public/registry/styles/new-york/chart-radial-simple.json
+++ b/apps/www/public/registry/styles/new-york/chart-radial-simple.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-simple",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-simple.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"hsl(var(--chart-3))\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"hsl(var(--chart-4))\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"hsl(var(--chart-5))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radial-stacked.json b/apps/www/public/registry/styles/new-york/chart-radial-stacked.json
index 46f8a4bebe..ec2991850f 100644
--- a/apps/www/public/registry/styles/new-york/chart-radial-stacked.json
+++ b/apps/www/public/registry/styles/new-york/chart-radial-stacked.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-stacked",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-stacked.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-radial-text.json b/apps/www/public/registry/styles/new-york/chart-radial-text.json
index 60b221a811..249de414d6 100644
--- a/apps/www/public/registry/styles/new-york/chart-radial-text.json
+++ b/apps/www/public/registry/styles/new-york/chart-radial-text.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-radial-text",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-radial-text.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { ChartConfig, ChartContainer } from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-advanced.json b/apps/www/public/registry/styles/new-york/chart-tooltip-advanced.json
index be5f624668..745a19aaa9 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-advanced.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-advanced.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-advanced",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-advanced.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                          Total\n                          <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"font-normal text-muted-foreground\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-default.json b/apps/www/public/registry/styles/new-york/chart-tooltip-default.json
index bc1d903ef3..38185313cc 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-default.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-default.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-default",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-default.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Default</CardTitle>\n        <CardDescription>\n          Default tooltip with ChartTooltipContent.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-formatter.json b/apps/www/public/registry/styles/new-york/chart-tooltip-formatter.json
index e0de9621b5..4abcd86dfb 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-formatter.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-formatter.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-formatter",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-formatter.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-icons.json b/apps/www/public/registry/styles/new-york/chart-tooltip-icons.json
index c13f8002a1..1159b21d38 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-icons.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-icons.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-icons",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-icons.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Footprints, Waves } from \"lucide-react\"\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n    icon: Footprints,\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n    icon: Waves,\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Icons</CardTitle>\n        <CardDescription>Tooltip with icons.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-line.json b/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-line.json
index 6d45e4a117..961ddd527c 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-line.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-line.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-indicator-line",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-indicator-line.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Line Indicator</CardTitle>\n        <CardDescription>Tooltip with line indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent indicator=\"line\" />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-none.json b/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-none.json
index 067963abad..2de949caf9 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-none.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-indicator-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-indicator-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-indicator-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Indicator</CardTitle>\n        <CardDescription>Tooltip with no indicator.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-label-custom.json b/apps/www/public/registry/styles/new-york/chart-tooltip-label-custom.json
index 4afa4c174d..6729aef8d2 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-label-custom.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-label-custom.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-label-custom",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-label-custom.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  activities: {\n    label: \"Activities\",\n  },\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Custom label</CardTitle>\n        <CardDescription>\n          Tooltip with custom label from chartConfig.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent labelKey=\"activities\" indicator=\"line\" />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-label-formatter.json b/apps/www/public/registry/styles/new-york/chart-tooltip-label-formatter.json
index 4828f75a0c..8177579b68 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-label-formatter.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-label-formatter.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-label-formatter",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-label-formatter.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Label Formatter</CardTitle>\n        <CardDescription>Tooltip with label formatter.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      day: \"numeric\",\n                      month: \"long\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart-tooltip-label-none.json b/apps/www/public/registry/styles/new-york/chart-tooltip-label-none.json
index a5298e9222..f9e3e65dca 100644
--- a/apps/www/public/registry/styles/new-york/chart-tooltip-label-none.json
+++ b/apps/www/public/registry/styles/new-york/chart-tooltip-label-none.json
@@ -1,6 +1,6 @@
 {
   "name": "chart-tooltip-label-none",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "card",
     "chart"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "block/chart-tooltip-label-none.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"hsl(var(--chart-1))\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"hsl(var(--chart-2))\",\n  },\n} satisfies ChartConfig\n\nexport default function Component() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - No Label</CardTitle>\n        <CardDescription>Tooltip with no label.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={<ChartTooltipContent hideIndicator hideLabel />}\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/chart.json b/apps/www/public/registry/styles/new-york/chart.json
index e0e05a7d6f..4522c7a5f0 100644
--- a/apps/www/public/registry/styles/new-york/chart.json
+++ b/apps/www/public/registry/styles/new-york/chart.json
@@ -1,6 +1,6 @@
 {
   "name": "chart",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "recharts",
     "lucide-react"
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/chart.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport {\n  NameType,\n  Payload,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nconst ChartContainer = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    config: ChartConfig\n    children: React.ComponentProps<\n      typeof RechartsPrimitive.ResponsiveContainer\n    >[\"children\"]\n  }\n>(({ id, className, children, config, ...props }, ref) => {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-chart={chartId}\n        ref={ref}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([_, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n    React.ComponentProps<\"div\"> & {\n      hideLabel?: boolean\n      hideIndicator?: boolean\n      indicator?: \"line\" | \"dot\" | \"dashed\"\n      nameKey?: string\n      labelKey?: string\n    }\n>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) {\n        return null\n      }\n\n      const [item] = payload\n      const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\n      const value =\n        !labelKey && typeof label === \"string\"\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n\n      if (labelFormatter) {\n        return (\n          <div className={cn(\"font-medium\", labelClassName)}>\n            {labelFormatter(value, payload)}\n          </div>\n        )\n      }\n\n      if (!value) {\n        return null\n      }\n\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n    }, [\n      label,\n      labelFormatter,\n      payload,\n      hideLabel,\n      labelClassName,\n      config,\n      labelKey,\n    ])\n\n    if (!active || !payload?.length) {\n      return null\n    }\n\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n          className\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> &\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n      hideIcon?: boolean\n      nameKey?: string\n    }\n>(\n  (\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n    ref\n  ) => {\n    const { config } = useChart()\n\n    if (!payload?.length) {\n      return null\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center justify-center gap-4\",\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n          className\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/charts-01.json b/apps/www/public/registry/styles/new-york/charts-01.json
index 20a24cebe8..94b81cf182 100644
--- a/apps/www/public/registry/styles/new-york/charts-01.json
+++ b/apps/www/public/registry/styles/new-york/charts-01.json
@@ -1,13 +1,13 @@
 {
   "name": "charts-01",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "chart"
   ],
   "files": [
     {
       "path": "block/charts-01.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "\"use client\"\n\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  LabelList,\n  Line,\n  LineChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  Rectangle,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york//ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/registry/new-york//ui/chart\"\nimport { Separator } from \"@/registry/new-york//ui/separator\"\n\nexport const description = \"A collection of health charts.\"\n\nexport const iframeHeight = \"900px\"\n\nexport const containerClassName = \"min-h-screen py-12\"\n\nexport default function Charts() {\n  return (\n    <div className=\"chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8\">\n      <div className=\"grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]\">\n        <Card\n          x-chunk=\"A bar chart showing the number of steps you have walked in the past 7 days.\"\n          className=\"lg:max-w-md\"\n        >\n          <CardHeader className=\"space-y-0 pb-2\">\n            <CardDescription>Today</CardDescription>\n            <CardTitle className=\"text-4xl tabular-nums\">\n              12,584{\" \"}\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                steps\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: -4,\n                  right: -4,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={5}\n                  fillOpacity={0.6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <ChartTooltip\n                  defaultIndex={2}\n                  content={\n                    <ChartTooltipContent\n                      hideIndicator\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n                <ReferenceLine\n                  y={1200}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeDasharray=\"3 3\"\n                  strokeWidth={1}\n                >\n                  <Label\n                    position=\"insideBottomLeft\"\n                    value=\"Average Steps\"\n                    offset={10}\n                    fill=\"hsl(var(--foreground))\"\n                  />\n                  <Label\n                    position=\"insideTopLeft\"\n                    value=\"12,343\"\n                    className=\"text-lg\"\n                    fill=\"hsl(var(--foreground))\"\n                    offset={10}\n                    startOffset={100}\n                  />\n                </ReferenceLine>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex-col items-start gap-1\">\n            <CardDescription>\n              Over the past 7 days, you have walked{\" \"}\n              <span className=\"font-medium text-foreground\">53,305</span> steps.\n            </CardDescription>\n            <CardDescription>\n              You need{\" \"}\n              <span className=\"font-medium text-foreground\">12,584</span> more\n              steps to reach your goal.\n            </CardDescription>\n          </CardFooter>\n        </Card>\n        <Card\n          x-chunk=\"A line chart showing the resting heart rate for the past 7 days.\"\n          className=\"flex flex-col lg:max-w-md\"\n        >\n          <CardHeader className=\"flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1\">\n            <div>\n              <CardDescription>Resting HR</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                62\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  bpm\n                </span>\n              </CardTitle>\n            </div>\n            <div>\n              <CardDescription>Variability</CardDescription>\n              <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n                35\n                <span className=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                  ms\n                </span>\n              </CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent className=\"flex flex-1 items-center\">\n            <ChartContainer\n              config={{\n                resting: {\n                  label: \"Resting\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"w-full\"\n            >\n              <LineChart\n                accessibilityLayer\n                margin={{\n                  left: 14,\n                  right: 14,\n                  top: 10,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    resting: 72,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    resting: 35,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    resting: 52,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    resting: 62,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    resting: 70,\n                  },\n                ]}\n              >\n                <CartesianGrid\n                  strokeDasharray=\"4 4\"\n                  vertical={false}\n                  stroke=\"hsl(var(--muted-foreground))\"\n                  strokeOpacity={0.5}\n                />\n                <YAxis hide domain={[\"dataMin - 10\", \"dataMax + 10\"]} />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={8}\n                  tickFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      weekday: \"short\",\n                    })\n                  }}\n                />\n                <Line\n                  dataKey=\"resting\"\n                  type=\"natural\"\n                  fill=\"var(--color-resting)\"\n                  stroke=\"var(--color-resting)\"\n                  strokeWidth={2}\n                  dot={false}\n                  activeDot={{\n                    fill: \"var(--color-resting)\",\n                    stroke: \"var(--color-resting)\",\n                    r: 4,\n                  }}\n                />\n                <ChartTooltip\n                  content={\n                    <ChartTooltipContent\n                      indicator=\"line\"\n                      labelFormatter={(value) => {\n                        return new Date(value).toLocaleDateString(\"en-US\", {\n                          day: \"numeric\",\n                          month: \"long\",\n                          year: \"numeric\",\n                        })\n                      }}\n                    />\n                  }\n                  cursor={false}\n                />\n              </LineChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6 lg:max-w-[20rem]\">\n        <Card\n          x-chunk=\"Two horizontal bar charts showing total steps taken during the current year and last year.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader>\n            <CardTitle>Progress</CardTitle>\n            <CardDescription>\n              You're average more steps a day this year than last year.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"grid gap-4\">\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                12,453\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--chart-1))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2024\",\n                      steps: 12435,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"white\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n            <div className=\"grid auto-rows-min gap-2\">\n              <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                10,103\n                <span className=\"text-sm font-normal text-muted-foreground\">\n                  steps/day\n                </span>\n              </div>\n              <ChartContainer\n                config={{\n                  steps: {\n                    label: \"Steps\",\n                    color: \"hsl(var(--muted))\",\n                  },\n                }}\n                className=\"aspect-auto h-[32px] w-full\"\n              >\n                <BarChart\n                  accessibilityLayer\n                  layout=\"vertical\"\n                  margin={{\n                    left: 0,\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                  }}\n                  data={[\n                    {\n                      date: \"2023\",\n                      steps: 10103,\n                    },\n                  ]}\n                >\n                  <Bar\n                    dataKey=\"steps\"\n                    fill=\"var(--color-steps)\"\n                    radius={4}\n                    barSize={32}\n                  >\n                    <LabelList\n                      position=\"insideLeft\"\n                      dataKey=\"date\"\n                      offset={8}\n                      fontSize={12}\n                      fill=\"hsl(var(--muted-foreground))\"\n                    />\n                  </Bar>\n                  <YAxis dataKey=\"date\" type=\"category\" tickCount={1} hide />\n                  <XAxis dataKey=\"steps\" type=\"number\" hide />\n                </BarChart>\n              </ChartContainer>\n            </div>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing the walking and running distance for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Walking Distance</CardTitle>\n            <CardDescription>\n              Over the last 7 days, your distance walked and run was 12.5 miles\n              per day.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-0\">\n            <div className=\"flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none\">\n              12.5\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                miles/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                steps: {\n                  label: \"Steps\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[72px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    steps: 2000,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    steps: 2100,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    steps: 2200,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    steps: 1300,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    steps: 1400,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    steps: 2500,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    steps: 1600,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"steps\"\n                  fill=\"var(--color-steps)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing move, exercise, and stand progress.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4 pb-2\">\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"h-[140px] w-full\"\n            >\n              <BarChart\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    label: \"8/12 hr\",\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    label: \"46/60 min\",\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    label: \"245/360 kcal\",\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                layout=\"vertical\"\n                barSize={32}\n                barGap={2}\n              >\n                <XAxis type=\"number\" dataKey=\"value\" hide />\n                <YAxis\n                  dataKey=\"activity\"\n                  type=\"category\"\n                  tickLine={false}\n                  tickMargin={4}\n                  axisLine={false}\n                  className=\"capitalize\"\n                />\n                <Bar dataKey=\"value\" radius={5}>\n                  <LabelList\n                    position=\"insideLeft\"\n                    dataKey=\"label\"\n                    fill=\"white\"\n                    offset={8}\n                    fontSize={12}\n                  />\n                </Bar>\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n          <CardFooter className=\"flex flex-row border-t p-4\">\n            <div className=\"flex w-full items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  562\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  73\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <Separator orientation=\"vertical\" className=\"mx-2 h-10 w-px\" />\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-xs text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none\">\n                  14\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n          </CardFooter>\n        </Card>\n      </div>\n      <div className=\"grid w-full flex-1 gap-6\">\n        <Card\n          x-chunk=\"A radial bar chart showing the percentage of time spent moving, exercising, and standing.\"\n          className=\"max-w-xs\"\n        >\n          <CardContent className=\"flex gap-4 p-4\">\n            <div className=\"grid items-center gap-2\">\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Move</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  562/600\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    kcal\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Exercise</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  73/120\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    min\n                  </span>\n                </div>\n              </div>\n              <div className=\"grid flex-1 auto-rows-min gap-0.5\">\n                <div className=\"text-sm text-muted-foreground\">Stand</div>\n                <div className=\"flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none\">\n                  8/12\n                  <span className=\"text-sm font-normal text-muted-foreground\">\n                    hr\n                  </span>\n                </div>\n              </div>\n            </div>\n            <ChartContainer\n              config={{\n                move: {\n                  label: \"Move\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n                exercise: {\n                  label: \"Exercise\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n                stand: {\n                  label: \"Stand\",\n                  color: \"hsl(var(--chart-3))\",\n                },\n              }}\n              className=\"mx-auto aspect-square w-full max-w-[80%]\"\n            >\n              <RadialBarChart\n                margin={{\n                  left: -10,\n                  right: -10,\n                  top: -10,\n                  bottom: -10,\n                }}\n                data={[\n                  {\n                    activity: \"stand\",\n                    value: (8 / 12) * 100,\n                    fill: \"var(--color-stand)\",\n                  },\n                  {\n                    activity: \"exercise\",\n                    value: (46 / 60) * 100,\n                    fill: \"var(--color-exercise)\",\n                  },\n                  {\n                    activity: \"move\",\n                    value: (245 / 360) * 100,\n                    fill: \"var(--color-move)\",\n                  },\n                ]}\n                innerRadius=\"20%\"\n                barSize={24}\n                startAngle={90}\n                endAngle={450}\n              >\n                <PolarAngleAxis\n                  type=\"number\"\n                  domain={[0, 100]}\n                  dataKey=\"value\"\n                  tick={false}\n                />\n                <RadialBar dataKey=\"value\" background cornerRadius={5} />\n              </RadialBarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"A bar chart showing active energy in the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"p-4 pb-0\">\n            <CardTitle>Active Energy</CardTitle>\n            <CardDescription>\n              You're burning an average of 754 calories per day. Good job!\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"flex flex-row items-baseline gap-4 p-4 pt-2\">\n            <div className=\"flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none\">\n              1,254\n              <span className=\"text-sm font-normal text-muted-foreground\">\n                kcal/day\n              </span>\n            </div>\n            <ChartContainer\n              config={{\n                calories: {\n                  label: \"Calories\",\n                  color: \"hsl(var(--chart-1))\",\n                },\n              }}\n              className=\"ml-auto w-[64px]\"\n            >\n              <BarChart\n                accessibilityLayer\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    calories: 354,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    calories: 514,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    calories: 345,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    calories: 734,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    calories: 645,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    calories: 456,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    calories: 345,\n                  },\n                ]}\n              >\n                <Bar\n                  dataKey=\"calories\"\n                  fill=\"var(--color-calories)\"\n                  radius={2}\n                  fillOpacity={0.2}\n                  activeIndex={6}\n                  activeBar={<Rectangle fillOpacity={0.8} />}\n                />\n                <XAxis\n                  dataKey=\"date\"\n                  tickLine={false}\n                  axisLine={false}\n                  tickMargin={4}\n                  hide\n                />\n              </BarChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n        <Card\n          x-chunk=\"An area chart showing the time spent in bed for the past 7 days.\"\n          className=\"max-w-xs\"\n        >\n          <CardHeader className=\"space-y-0 pb-0\">\n            <CardDescription>Time in Bed</CardDescription>\n            <CardTitle className=\"flex items-baseline gap-1 text-4xl tabular-nums\">\n              8\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                hr\n              </span>\n              35\n              <span className=\"font-sans text-sm font-normal tracking-normal text-muted-foreground\">\n                min\n              </span>\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"p-0\">\n            <ChartContainer\n              config={{\n                time: {\n                  label: \"Time\",\n                  color: \"hsl(var(--chart-2))\",\n                },\n              }}\n            >\n              <AreaChart\n                accessibilityLayer\n                data={[\n                  {\n                    date: \"2024-01-01\",\n                    time: 8.5,\n                  },\n                  {\n                    date: \"2024-01-02\",\n                    time: 7.2,\n                  },\n                  {\n                    date: \"2024-01-03\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-04\",\n                    time: 6.2,\n                  },\n                  {\n                    date: \"2024-01-05\",\n                    time: 5.2,\n                  },\n                  {\n                    date: \"2024-01-06\",\n                    time: 8.1,\n                  },\n                  {\n                    date: \"2024-01-07\",\n                    time: 7.0,\n                  },\n                ]}\n                margin={{\n                  left: 0,\n                  right: 0,\n                  top: 0,\n                  bottom: 0,\n                }}\n              >\n                <XAxis dataKey=\"date\" hide />\n                <YAxis domain={[\"dataMin - 5\", \"dataMax + 2\"]} hide />\n                <defs>\n                  <linearGradient id=\"fillTime\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop\n                      offset=\"5%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor=\"var(--color-time)\"\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                </defs>\n                <Area\n                  dataKey=\"time\"\n                  type=\"natural\"\n                  fill=\"url(#fillTime)\"\n                  fillOpacity={0.4}\n                  stroke=\"var(--color-time)\"\n                />\n                <ChartTooltip\n                  cursor={false}\n                  content={<ChartTooltipContent hideLabel />}\n                  formatter={(value) => (\n                    <div className=\"flex min-w-[120px] items-center text-xs text-muted-foreground\">\n                      Time in bed\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          hr\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              </AreaChart>\n            </ChartContainer>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/checkbox.json b/apps/www/public/registry/styles/new-york/checkbox.json
index 959068cbf8..2fffdd650d 100644
--- a/apps/www/public/registry/styles/new-york/checkbox.json
+++ b/apps/www/public/registry/styles/new-york/checkbox.json
@@ -1,13 +1,13 @@
 {
   "name": "checkbox",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-checkbox"
   ],
   "files": [
     {
       "path": "ui/checkbox.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <CheckIcon className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/collapsible.json b/apps/www/public/registry/styles/new-york/collapsible.json
index e2863602f6..aa30ab5459 100644
--- a/apps/www/public/registry/styles/new-york/collapsible.json
+++ b/apps/www/public/registry/styles/new-york/collapsible.json
@@ -1,13 +1,13 @@
 {
   "name": "collapsible",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-collapsible"
   ],
   "files": [
     {
       "path": "ui/collapsible.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/command.json b/apps/www/public/registry/styles/new-york/command.json
index c113743820..3f8f017ea6 100644
--- a/apps/www/public/registry/styles/new-york/command.json
+++ b/apps/www/public/registry/styles/new-york/command.json
@@ -1,6 +1,6 @@
 {
   "name": "command",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "cmdk@1.0.0"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/ui/dialog\"\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"overflow-hidden p-0\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    <MagnifyingGlassIcon className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty\n    ref={ref}\n    className=\"py-6 text-center text-sm\"\n    {...props}\n  />\n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50\",\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/context-menu.json b/apps/www/public/registry/styles/new-york/context-menu.json
index de9a310a1b..d08b4a1b34 100644
--- a/apps/www/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/public/registry/styles/new-york/context-menu.json
@@ -1,13 +1,13 @@
 {
   "name": "context-menu",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-context-menu"
   ],
   "files": [
     {
       "path": "ui/context-menu.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  DotFilledIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-4 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/dashboard-01.json b/apps/www/public/registry/styles/new-york/dashboard-01.json
index 1c94b7b0a9..742c78dd42 100644
--- a/apps/www/public/registry/styles/new-york/dashboard-01.json
+++ b/apps/www/public/registry/styles/new-york/dashboard-01.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-01",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "dropdown-menu",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/dashboard-01.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\nimport {\n  Activity,\n  ArrowUpRight,\n  CircleUser,\n  CreditCard,\n  DollarSign,\n  Menu,\n  Package2,\n  Search,\n  Users,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nexport const description =\n  \"An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.\"\n\nexport const iframeHeight = \"730px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Analytics\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Analytics\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n        <div className=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n          <Card x-chunk=\"A card showing the total revenue in USD and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Total Revenue\n              </CardTitle>\n              <DollarSign className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">$45,231.89</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +20.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total subscriptions and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">\n                Subscriptions\n              </CardTitle>\n              <Users className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+2350</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +180.1% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total sales and the percentage difference from last month.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Sales</CardTitle>\n              <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+12,234</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +19% from last month\n              </p>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing the total active users and the percentage difference from last hour.\">\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n              <CardTitle className=\"text-sm font-medium\">Active Now</CardTitle>\n              <Activity className=\"h-4 w-4 text-muted-foreground\" />\n            </CardHeader>\n            <CardContent>\n              <div className=\"text-2xl font-bold\">+573</div>\n              <p className=\"text-xs text-muted-foreground\">\n                +201 since last hour\n              </p>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n          <Card\n            className=\"xl:col-span-2\"\n            x-chunk=\"A card showing a table of recent transactions with a link to view all transactions.\"\n          >\n            <CardHeader className=\"flex flex-row items-center\">\n              <div className=\"grid gap-2\">\n                <CardTitle>Transactions</CardTitle>\n                <CardDescription>\n                  Recent transactions from your store.\n                </CardDescription>\n              </div>\n              <Button asChild size=\"sm\" className=\"ml-auto gap-1\">\n                <Link href=\"#\">\n                  View All\n                  <ArrowUpRight className=\"h-4 w-4\" />\n                </Link>\n              </Button>\n            </CardHeader>\n            <CardContent>\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead>Customer</TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Type\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Status\n                    </TableHead>\n                    <TableHead className=\"hidden xl:table-column\">\n                      Date\n                    </TableHead>\n                    <TableHead className=\"text-right\">Amount</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-23\n                    </TableCell>\n                    <TableCell className=\"text-right\">$250.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Olivia Smith</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        olivia@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Refund\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Declined\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-24\n                    </TableCell>\n                    <TableCell className=\"text-right\">$150.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Noah Williams</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        noah@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Subscription\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-25\n                    </TableCell>\n                    <TableCell className=\"text-right\">$350.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Emma Brown</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        emma@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-26\n                    </TableCell>\n                    <TableCell className=\"text-right\">$450.00</TableCell>\n                  </TableRow>\n                  <TableRow>\n                    <TableCell>\n                      <div className=\"font-medium\">Liam Johnson</div>\n                      <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                        liam@example.com\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      Sale\n                    </TableCell>\n                    <TableCell className=\"hidden xl:table-column\">\n                      <Badge className=\"text-xs\" variant=\"outline\">\n                        Approved\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"hidden md:table-cell lg:hidden xl:table-column\">\n                      2023-06-27\n                    </TableCell>\n                    <TableCell className=\"text-right\">$550.00</TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n          <Card x-chunk=\"A card showing a list of recent sales with customer names and email addresses.\">\n            <CardHeader>\n              <CardTitle>Recent Sales</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-8\">\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                  <AvatarFallback>OM</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Olivia Martin\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    olivia.martin@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$1,999.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                  <AvatarFallback>JL</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Jackson Lee\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    jackson.lee@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                  <AvatarFallback>IN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Isabella Nguyen\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    isabella.nguyen@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$299.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                  <AvatarFallback>WK</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    William Kim\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    will@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$99.00</div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <Avatar className=\"hidden h-9 w-9 sm:flex\">\n                  <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                  <AvatarFallback>SD</AvatarFallback>\n                </Avatar>\n                <div className=\"grid gap-1\">\n                  <p className=\"text-sm font-medium leading-none\">\n                    Sofia Davis\n                  </p>\n                  <p className=\"text-sm text-muted-foreground\">\n                    sofia.davis@email.com\n                  </p>\n                </div>\n                <div className=\"ml-auto font-medium\">+$39.00</div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </main>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/dashboard-02.json b/apps/www/public/registry/styles/new-york/dashboard-02.json
index d5a2aadc0a..d61a7561da 100644
--- a/apps/www/public/registry/styles/new-york/dashboard-02.json
+++ b/apps/www/public/registry/styles/new-york/dashboard-02.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-02",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "button",
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "block/dashboard-02.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\nimport {\n  Bell,\n  CircleUser,\n  Home,\n  LineChart,\n  Menu,\n  Package,\n  Package2,\n  Search,\n  ShoppingCart,\n  Users,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\n\nexport const description =\n  \"A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.\"\n\nexport const iframeHeight = \"800px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n      <div className=\"hidden border-r bg-muted/40 md:block\">\n        <div className=\"flex h-full max-h-screen flex-col gap-2\">\n          <div className=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n            <Link href=\"/\" className=\"flex items-center gap-2 font-semibold\">\n              <Package2 className=\"h-6 w-6\" />\n              <span className=\"\">Acme Inc</span>\n            </Link>\n            <Button variant=\"outline\" size=\"icon\" className=\"ml-auto h-8 w-8\">\n              <Bell className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Toggle notifications</span>\n            </Button>\n          </div>\n          <div className=\"flex-1\">\n            <nav className=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Home className=\"h-4 w-4\" />\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <ShoppingCart className=\"h-4 w-4\" />\n                Orders\n                <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n              >\n                <Package className=\"h-4 w-4\" />\n                Products{\" \"}\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <Users className=\"h-4 w-4\" />\n                Customers\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n              >\n                <LineChart className=\"h-4 w-4\" />\n                Analytics\n              </Link>\n            </nav>\n          </div>\n          <div className=\"mt-auto p-4\">\n            <Card x-chunk=\"A card with a call to action\">\n              <CardHeader className=\"p-2 pt-0 md:p-4\">\n                <CardTitle>Upgrade to Pro</CardTitle>\n                <CardDescription>\n                  Unlock all features and get unlimited access to our support\n                  team.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"p-2 pt-0 md:p-4 md:pt-0\">\n                <Button size=\"sm\" className=\"w-full\">\n                  Upgrade\n                </Button>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex flex-col\">\n        <header className=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"shrink-0 md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle navigation menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"flex flex-col\">\n              <nav className=\"grid gap-2 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-2 text-lg font-semibold\"\n                >\n                  <Package2 className=\"h-6 w-6\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                  <Badge className=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                    6\n                  </Badge>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Analytics\n                </Link>\n              </nav>\n              <div className=\"mt-auto\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Upgrade to Pro</CardTitle>\n                    <CardDescription>\n                      Unlock all features and get unlimited access to our\n                      support team.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Button size=\"sm\" className=\"w-full\">\n                      Upgrade\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </SheetContent>\n          </Sheet>\n          <div className=\"w-full flex-1\">\n            <form>\n              <div className=\"relative\">\n                <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n                <Input\n                  type=\"search\"\n                  placeholder=\"Search products...\"\n                  className=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n                />\n              </div>\n            </form>\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n          <div className=\"flex items-center\">\n            <h1 className=\"text-lg font-semibold md:text-2xl\">Inventory</h1>\n          </div>\n          <div\n            x-chunk=\"An empty state showing no products with a heading, description and a call to action to add a product.\"\n            className=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\"\n          >\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <h3 className=\"text-2xl font-bold tracking-tight\">\n                You have no products\n              </h3>\n              <p className=\"text-sm text-muted-foreground\">\n                You can start selling as soon as you add a product.\n              </p>\n              <Button className=\"mt-4\">Add Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/dashboard-03.json b/apps/www/public/registry/styles/new-york/dashboard-03.json
index e670973af4..3c93905818 100644
--- a/apps/www/public/registry/styles/new-york/dashboard-03.json
+++ b/apps/www/public/registry/styles/new-york/dashboard-03.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-03",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "button",
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "block/dashboard-03.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import {\n  Bird,\n  Book,\n  Bot,\n  Code2,\n  CornerDownLeft,\n  LifeBuoy,\n  Mic,\n  Paperclip,\n  Rabbit,\n  Settings,\n  Settings2,\n  Share,\n  SquareTerminal,\n  SquareUser,\n  Triangle,\n  Turtle,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport const description =\n  \"An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.\"\n\nexport const iframeHeight = \"720px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid h-screen w-full pl-[53px]\">\n      <aside className=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n        <div className=\"border-b p-2\">\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n            <Triangle className=\"size-5 fill-foreground\" />\n          </Button>\n        </div>\n        <nav className=\"grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Playground\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Models\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              API\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Help\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col\">\n        <header className=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n          <h1 className=\"text-xl font-semibold\">Playground</h1>\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\">\n                <Settings className=\"size-4\" />\n                <span className=\"sr-only\">Settings</span>\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"max-h-[80vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Configuration</DrawerTitle>\n                <DrawerDescription>\n                  Configure the settings for the model and messages.\n                </DrawerDescription>\n              </DrawerHeader>\n              <form className=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Settings\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"model\">Model</Label>\n                    <Select>\n                      <SelectTrigger\n                        id=\"model\"\n                        className=\"items-start [&_[data-description]]:hidden\"\n                      >\n                        <SelectValue placeholder=\"Select a model\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"genesis\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Rabbit className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Genesis\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Our fastest model for general use cases.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"explorer\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Bird className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Explorer\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Performance and speed for efficiency.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"quantum\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Turtle className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Quantum\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                The most powerful model for complex\n                                computations.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"temperature\">Temperature</Label>\n                    <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </fieldset>\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Messages\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"role\">Role</Label>\n                    <Select defaultValue=\"system\">\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select a role\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"system\">System</SelectItem>\n                        <SelectItem value=\"user\">User</SelectItem>\n                        <SelectItem value=\"assistant\">Assistant</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"content\">Content</Label>\n                    <Textarea id=\"content\" placeholder=\"You are a...\" />\n                  </div>\n                </fieldset>\n              </form>\n            </DrawerContent>\n          </Drawer>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ml-auto gap-1.5 text-sm\"\n          >\n            <Share className=\"size-3.5\" />\n            Share\n          </Button>\n        </header>\n        <main className=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n          <div\n            className=\"relative hidden flex-col items-start gap-8 md:flex\"\n            x-chunk=\"A settings form a configuring an AI model and messages.\"\n          >\n            <form className=\"grid w-full items-start gap-6\">\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      className=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              The most powerful model for complex computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </div>\n              </fieldset>\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"role\">Role</Label>\n                  <Select defaultValue=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">System</SelectItem>\n                      <SelectItem value=\"user\">User</SelectItem>\n                      <SelectItem value=\"assistant\">Assistant</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"content\">Content</Label>\n                  <Textarea\n                    id=\"content\"\n                    placeholder=\"You are a...\"\n                    className=\"min-h-[9.5rem]\"\n                  />\n                </div>\n              </fieldset>\n            </form>\n          </div>\n          <div className=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n            <Badge variant=\"outline\" className=\"absolute right-3 top-3\">\n              Output\n            </Badge>\n            <div className=\"flex-1\" />\n            <form\n              className=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\"\n              x-chunk=\"A form for sending a message to an AI chatbot. The form has a textarea and buttons to upload files and record audio.\"\n            >\n              <Label htmlFor=\"message\" className=\"sr-only\">\n                Message\n              </Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"Type your message here...\"\n                className=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n              />\n              <div className=\"flex items-center p-3 pt-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip className=\"size-4\" />\n                      <span className=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Attach File</TooltipContent>\n                </Tooltip>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic className=\"size-4\" />\n                      <span className=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Use Microphone</TooltipContent>\n                </Tooltip>\n                <Button type=\"submit\" size=\"sm\" className=\"ml-auto gap-1.5\">\n                  Send Message\n                  <CornerDownLeft className=\"size-3.5\" />\n                </Button>\n              </div>\n            </form>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/dashboard-04.json b/apps/www/public/registry/styles/new-york/dashboard-04.json
index 20430bca3a..6c1c77337e 100644
--- a/apps/www/public/registry/styles/new-york/dashboard-04.json
+++ b/apps/www/public/registry/styles/new-york/dashboard-04.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-04",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
     "card",
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "block/dashboard-04.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Link from \"next/link\"\nimport { CircleUser, Menu, Package2, Search } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\n\nexport const description =\n  \"A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.\"\n\nexport const iframeHeight = \"780px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col\">\n      <header className=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n        <nav className=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n          <Link\n            href=\"#\"\n            className=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n          >\n            <Package2 className=\"h-6 w-6\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Dashboard\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Orders\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Products\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            Customers\n          </Link>\n          <Link\n            href=\"#\"\n            className=\"text-foreground transition-colors hover:text-foreground\"\n          >\n            Settings\n          </Link>\n        </nav>\n        <Sheet>\n          <SheetTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"shrink-0 md:hidden\"\n            >\n              <Menu className=\"h-5 w-5\" />\n              <span className=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\">\n            <nav className=\"grid gap-6 text-lg font-medium\">\n              <Link\n                href=\"#\"\n                className=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 className=\"h-6 w-6\" />\n                <span className=\"sr-only\">Acme Inc</span>\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Dashboard\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Orders\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Products\n              </Link>\n              <Link\n                href=\"#\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                Customers\n              </Link>\n              <Link href=\"#\" className=\"hover:text-foreground\">\n                Settings\n              </Link>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <div className=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n          <form className=\"ml-auto flex-1 sm:flex-initial\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                className=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n              />\n            </div>\n          </form>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" size=\"icon\" className=\"rounded-full\">\n                <CircleUser className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle user menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </header>\n      <main className=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n        <div className=\"mx-auto grid w-full max-w-6xl gap-2\">\n          <h1 className=\"text-3xl font-semibold\">Settings</h1>\n        </div>\n        <div className=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n          <nav\n            className=\"grid gap-4 text-sm text-muted-foreground\"\n            x-chunk=\"A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings.\"\n            x-chunk-container=\"chunk-container after:right-0\"\n          >\n            <Link href=\"#\" className=\"font-semibold text-primary\">\n              General\n            </Link>\n            <Link href=\"#\">Security</Link>\n            <Link href=\"#\">Integrations</Link>\n            <Link href=\"#\">Support</Link>\n            <Link href=\"#\">Organizations</Link>\n            <Link href=\"#\">Advanced</Link>\n          </nav>\n          <div className=\"grid gap-6\">\n            <Card x-chunk=\"A form to update the store name.\">\n              <CardHeader>\n                <CardTitle>Store Name</CardTitle>\n                <CardDescription>\n                  Used to identify your store in the marketplace.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Input placeholder=\"Store Name\" />\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n            <Card x-chunk=\"A form to update the plugins directory with a checkbox to allow administrators to change the directory.\">\n              <CardHeader>\n                <CardTitle>Plugins Directory</CardTitle>\n                <CardDescription>\n                  The directory within your project, in which your plugins are\n                  located.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form className=\"flex flex-col gap-4\">\n                  <Input\n                    placeholder=\"Project Name\"\n                    defaultValue=\"/content/plugins\"\n                  />\n                  <div className=\"flex items-center space-x-2\">\n                    <Checkbox id=\"include\" defaultChecked />\n                    <label\n                      htmlFor=\"include\"\n                      className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                    >\n                      Allow administrators to change the directory.\n                    </label>\n                  </div>\n                </form>\n              </CardContent>\n              <CardFooter className=\"border-t px-6 py-4\">\n                <Button>Save</Button>\n              </CardFooter>\n            </Card>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/dashboard-05.json b/apps/www/public/registry/styles/new-york/dashboard-05.json
index e0576cce9f..72931350fb 100644
--- a/apps/www/public/registry/styles/new-york/dashboard-05.json
+++ b/apps/www/public/registry/styles/new-york/dashboard-05.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-05",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "breadcrumb",
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "block/dashboard-05.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import * as React from \"react\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/new-york/ui/pagination\"\nimport { Progress } from \"@/registry/new-york/ui/progress\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport const description =\n  \"An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.\"\n\nexport const iframeHeight = \"906px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Orders</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n          <div className=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n              <Card\n                className=\"sm:col-span-2\"\n                x-chunk=\"A card for an orders dashboard with a description and a button to create a new order.\"\n              >\n                <CardHeader className=\"pb-3\">\n                  <CardTitle>Your Orders</CardTitle>\n                  <CardDescription className=\"text-balance max-w-lg leading-relaxed\">\n                    Introducing Our Dynamic Orders Dashboard for Seamless\n                    Management and Insightful Analysis.\n                  </CardDescription>\n                </CardHeader>\n                <CardFooter>\n                  <Button>Create New Order</Button>\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this week's total sales in USD, the percentage difference from last week, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Week</CardDescription>\n                  <CardTitle className=\"text-4xl\">$1,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +25% from last week\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={25} aria-label=\"25% increase\" />\n                </CardFooter>\n              </Card>\n              <Card x-chunk=\"A stats card showing this month's total sales in USD, the percentage difference from last month, and a progress bar.\">\n                <CardHeader className=\"pb-2\">\n                  <CardDescription>This Month</CardDescription>\n                  <CardTitle className=\"text-4xl\">$5,329</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div className=\"text-xs text-muted-foreground\">\n                    +10% from last month\n                  </div>\n                </CardContent>\n                <CardFooter>\n                  <Progress value={12} aria-label=\"12% increase\" />\n                </CardFooter>\n              </Card>\n            </div>\n            <Tabs defaultValue=\"week\">\n              <div className=\"flex items-center\">\n                <TabsList>\n                  <TabsTrigger value=\"week\">Week</TabsTrigger>\n                  <TabsTrigger value=\"month\">Month</TabsTrigger>\n                  <TabsTrigger value=\"year\">Year</TabsTrigger>\n                </TabsList>\n                <div className=\"ml-auto flex items-center gap-2\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"h-7 gap-1 text-sm\"\n                      >\n                        <ListFilter className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only sm:not-sr-only\">Filter</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuCheckboxItem checked>\n                        Fulfilled\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Declined\n                      </DropdownMenuCheckboxItem>\n                      <DropdownMenuCheckboxItem>\n                        Refunded\n                      </DropdownMenuCheckboxItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className=\"h-7 gap-1 text-sm\"\n                  >\n                    <File className=\"h-3.5 w-3.5\" />\n                    <span className=\"sr-only sm:not-sr-only\">Export</span>\n                  </Button>\n                </div>\n              </div>\n              <TabsContent value=\"week\">\n                <Card x-chunk=\"A table of recent orders showing the following columns: Customer, Type, Status, Date, and Amount.\">\n                  <CardHeader className=\"px-7\">\n                    <CardTitle>Orders</CardTitle>\n                    <CardDescription>\n                      Recent orders from your store.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead>Customer</TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Type\n                          </TableHead>\n                          <TableHead className=\"hidden sm:table-cell\">\n                            Status\n                          </TableHead>\n                          <TableHead className=\"hidden md:table-cell\">\n                            Date\n                          </TableHead>\n                          <TableHead className=\"text-right\">Amount</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow className=\"bg-accent\">\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        {/* <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow> */}\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Noah Williams</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              noah@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Subscription\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-25\n                          </TableCell>\n                          <TableCell className=\"text-right\">$350.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Liam Johnson</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              liam@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-23\n                          </TableCell>\n                          <TableCell className=\"text-right\">$250.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Olivia Smith</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              olivia@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Refund\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"outline\">\n                              Declined\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-24\n                          </TableCell>\n                          <TableCell className=\"text-right\">$150.00</TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell>\n                            <div className=\"font-medium\">Emma Brown</div>\n                            <div className=\"hidden text-sm text-muted-foreground md:inline\">\n                              emma@example.com\n                            </div>\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            Sale\n                          </TableCell>\n                          <TableCell className=\"hidden sm:table-cell\">\n                            <Badge className=\"text-xs\" variant=\"secondary\">\n                              Fulfilled\n                            </Badge>\n                          </TableCell>\n                          <TableCell className=\"hidden md:table-cell\">\n                            2023-06-26\n                          </TableCell>\n                          <TableCell className=\"text-right\">$450.00</TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n          </div>\n          <div>\n            <Card\n              className=\"overflow-hidden\"\n              x-chunk=\"An order details card with order details, shipping information, customer information and payment information.\"\n            >\n              <CardHeader className=\"flex flex-row items-start bg-muted/50\">\n                <div className=\"grid gap-0.5\">\n                  <CardTitle className=\"group flex items-center gap-2 text-lg\">\n                    Order Oe31b70H\n                    <Button\n                      size=\"icon\"\n                      variant=\"outline\"\n                      className=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                    >\n                      <Copy className=\"h-3 w-3\" />\n                      <span className=\"sr-only\">Copy Order ID</span>\n                    </Button>\n                  </CardTitle>\n                  <CardDescription>Date: November 23, 2023</CardDescription>\n                </div>\n                <div className=\"ml-auto flex items-center gap-1\">\n                  <Button size=\"sm\" variant=\"outline\" className=\"h-8 gap-1\">\n                    <Truck className=\"h-3.5 w-3.5\" />\n                    <span className=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                      Track Order\n                    </span>\n                  </Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-8 w-8\">\n                        <MoreVertical className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">More</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\">\n                      <DropdownMenuItem>Edit</DropdownMenuItem>\n                      <DropdownMenuItem>Export</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>Trash</DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-6 text-sm\">\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Order Details</div>\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Glimmer Lamps x <span>2</span>\n                      </span>\n                      <span>$250.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">\n                        Aqua Filters x <span>1</span>\n                      </span>\n                      <span>$49.00</span>\n                    </li>\n                  </ul>\n                  <Separator className=\"my-2\" />\n                  <ul className=\"grid gap-3\">\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Subtotal</span>\n                      <span>$299.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Shipping</span>\n                      <span>$5.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between\">\n                      <span className=\"text-muted-foreground\">Tax</span>\n                      <span>$25.00</span>\n                    </li>\n                    <li className=\"flex items-center justify-between font-semibold\">\n                      <span className=\"text-muted-foreground\">Total</span>\n                      <span>$329.00</span>\n                    </li>\n                  </ul>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <div className=\"font-semibold\">Shipping Information</div>\n                    <address className=\"grid gap-0.5 not-italic text-muted-foreground\">\n                      <span>Liam Johnson</span>\n                      <span>1234 Main St.</span>\n                      <span>Anytown, CA 12345</span>\n                    </address>\n                  </div>\n                  <div className=\"grid auto-rows-max gap-3\">\n                    <div className=\"font-semibold\">Billing Information</div>\n                    <div className=\"text-muted-foreground\">\n                      Same as shipping address\n                    </div>\n                  </div>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Customer Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Customer</dt>\n                      <dd>Liam Johnson</dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Email</dt>\n                      <dd>\n                        <a href=\"mailto:\">liam@acme.com</a>\n                      </dd>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"text-muted-foreground\">Phone</dt>\n                      <dd>\n                        <a href=\"tel:\">+1 234 567 890</a>\n                      </dd>\n                    </div>\n                  </dl>\n                </div>\n                <Separator className=\"my-4\" />\n                <div className=\"grid gap-3\">\n                  <div className=\"font-semibold\">Payment Information</div>\n                  <dl className=\"grid gap-3\">\n                    <div className=\"flex items-center justify-between\">\n                      <dt className=\"flex items-center gap-1 text-muted-foreground\">\n                        <CreditCard className=\"h-4 w-4\" />\n                        Visa\n                      </dt>\n                      <dd>**** **** **** 4532</dd>\n                    </div>\n                  </dl>\n                </div>\n              </CardContent>\n              <CardFooter className=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n                <div className=\"text-xs text-muted-foreground\">\n                  Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n                </div>\n                <Pagination className=\"ml-auto mr-0 w-auto\">\n                  <PaginationContent>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronLeft className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Previous Order</span>\n                      </Button>\n                    </PaginationItem>\n                    <PaginationItem>\n                      <Button size=\"icon\" variant=\"outline\" className=\"h-6 w-6\">\n                        <ChevronRight className=\"h-3.5 w-3.5\" />\n                        <span className=\"sr-only\">Next Order</span>\n                      </Button>\n                    </PaginationItem>\n                  </PaginationContent>\n                </Pagination>\n              </CardFooter>\n            </Card>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/dashboard-06.json b/apps/www/public/registry/styles/new-york/dashboard-06.json
index 9f2349a6e5..d516d6eb69 100644
--- a/apps/www/public/registry/styles/new-york/dashboard-06.json
+++ b/apps/www/public/registry/styles/new-york/dashboard-06.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-06",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "breadcrumb",
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "block/dashboard-06.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york/ui/tabs\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport const description =\n  \"An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.\"\n\nexport const iframeHeight = \"820px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 py-4\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>All Products</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <Tabs defaultValue=\"all\">\n            <div className=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"all\">All</TabsTrigger>\n                <TabsTrigger value=\"active\">Active</TabsTrigger>\n                <TabsTrigger value=\"draft\">Draft</TabsTrigger>\n                <TabsTrigger value=\"archived\" className=\"hidden sm:flex\">\n                  Archived\n                </TabsTrigger>\n              </TabsList>\n              <div className=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"outline\" size=\"sm\" className=\"h-7 gap-1\">\n                      <ListFilter className=\"h-3.5 w-3.5\" />\n                      <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                        Filter\n                      </span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuCheckboxItem checked>\n                      Active\n                    </DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>Draft</DropdownMenuCheckboxItem>\n                    <DropdownMenuCheckboxItem>\n                      Archived\n                    </DropdownMenuCheckboxItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button size=\"sm\" variant=\"outline\" className=\"h-7 gap-1\">\n                  <File className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Export\n                  </span>\n                </Button>\n                <Button size=\"sm\" className=\"h-7 gap-1\">\n                  <PlusCircle className=\"h-3.5 w-3.5\" />\n                  <span className=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                    Add Product\n                  </span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"all\">\n              <Card x-chunk=\"A list of products in a table with actions. Each row has an image, name, status, price, total sales, created at and actions.\">\n                <CardHeader>\n                  <CardTitle>Products</CardTitle>\n                  <CardDescription>\n                    Manage your products and view their sales performance.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead className=\"hidden w-[100px] sm:table-cell\">\n                          <span className=\"sr-only\">Image</span>\n                        </TableHead>\n                        <TableHead>Name</TableHead>\n                        <TableHead>Status</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Total Sales\n                        </TableHead>\n                        <TableHead className=\"hidden md:table-cell\">\n                          Created at\n                        </TableHead>\n                        <TableHead>\n                          <span className=\"sr-only\">Actions</span>\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Laser Lemonade Machine\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Draft</Badge>\n                        </TableCell>\n                        <TableCell>$499.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          25\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-07-12 10:42 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Hypernova Headphones\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$129.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          100\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-10-18 03:21 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          AeroGlow Desk Lamp\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$39.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          50\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-11-29 08:15 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          TechTonic Energy Drink\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"secondary\">Draft</Badge>\n                        </TableCell>\n                        <TableCell>$2.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          0\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2023-12-25 11:59 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Gamer Gear Pro Controller\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$59.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          75\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-01-01 12:00 AM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell className=\"hidden sm:table-cell\">\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square rounded-md object-cover\"\n                            height=\"64\"\n                            src=\"/placeholder.svg\"\n                            width=\"64\"\n                          />\n                        </TableCell>\n                        <TableCell className=\"font-medium\">\n                          Luminous VR Headset\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"outline\">Active</Badge>\n                        </TableCell>\n                        <TableCell>$199.99</TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          30\n                        </TableCell>\n                        <TableCell className=\"hidden md:table-cell\">\n                          2024-02-14 02:14 PM\n                        </TableCell>\n                        <TableCell>\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-haspopup=\"true\"\n                                size=\"icon\"\n                                variant=\"ghost\"\n                              >\n                                <MoreHorizontal className=\"h-4 w-4\" />\n                                <span className=\"sr-only\">Toggle menu</span>\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                              <DropdownMenuItem>Edit</DropdownMenuItem>\n                              <DropdownMenuItem>Delete</DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter>\n                  <div className=\"text-xs text-muted-foreground\">\n                    Showing <strong>1-10</strong> of <strong>32</strong>{\" \"}\n                    products\n                  </div>\n                </CardFooter>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/dashboard-07.json b/apps/www/public/registry/styles/new-york/dashboard-07.json
index 176a5b1269..0467eb5ec0 100644
--- a/apps/www/public/registry/styles/new-york/dashboard-07.json
+++ b/apps/www/public/registry/styles/new-york/dashboard-07.json
@@ -1,6 +1,6 @@
 {
   "name": "dashboard-07",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "badge",
     "breadcrumb",
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "block/dashboard-07.tsx",
-      "type": "components:block",
+      "type": "registry:block",
       "content": "import Image from \"next/image\"\nimport Link from \"next/link\"\nimport {\n  ChevronLeft,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/new-york/ui/badge\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york/ui/select\"\nimport { Sheet, SheetContent, SheetTrigger } from \"@/registry/new-york/ui/sheet\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york/ui/table\"\nimport { Textarea } from \"@/registry/new-york/ui/textarea\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york/ui/tooltip\"\n\nexport const description =\n  \"A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.\"\n\nexport const iframeHeight = \"1100px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"flex min-h-screen w-full flex-col bg-muted/40\">\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n        <nav className=\"flex flex-col items-center gap-4 px-2 py-4\">\n          <Link\n            href=\"#\"\n            className=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n          >\n            <Package2 className=\"h-4 w-4 transition-all group-hover:scale-110\" />\n            <span className=\"sr-only\">Acme Inc</span>\n          </Link>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Dashboard</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Dashboard</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Orders</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Orders</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Products</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Products</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Customers</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Customers</TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Analytics</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Analytics</TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Link\n                href=\"#\"\n                className=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Settings</span>\n              </Link>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">Settings</TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n        <header className=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n          <Sheet>\n            <SheetTrigger asChild>\n              <Button size=\"icon\" variant=\"outline\" className=\"sm:hidden\">\n                <PanelLeft className=\"h-5 w-5\" />\n                <span className=\"sr-only\">Toggle Menu</span>\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"left\" className=\"sm:max-w-xs\">\n              <nav className=\"grid gap-6 text-lg font-medium\">\n                <Link\n                  href=\"#\"\n                  className=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n                >\n                  <Package2 className=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                  <span className=\"sr-only\">Acme Inc</span>\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Home className=\"h-5 w-5\" />\n                  Dashboard\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <ShoppingCart className=\"h-5 w-5\" />\n                  Orders\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-foreground\"\n                >\n                  <Package className=\"h-5 w-5\" />\n                  Products\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <Users2 className=\"h-5 w-5\" />\n                  Customers\n                </Link>\n                <Link\n                  href=\"#\"\n                  className=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n                >\n                  <LineChart className=\"h-5 w-5\" />\n                  Settings\n                </Link>\n              </nav>\n            </SheetContent>\n          </Sheet>\n          <Breadcrumb className=\"hidden md:flex\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Dashboard</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link href=\"#\">Products</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Edit Product</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"relative ml-auto flex-1 md:grow-0\">\n            <Search className=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n            />\n          </div>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"overflow-hidden rounded-full\"\n              >\n                <Image\n                  src=\"/placeholder-user.jpg\"\n                  width={36}\n                  height={36}\n                  alt=\"Avatar\"\n                  className=\"overflow-hidden rounded-full\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>My Account</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Support</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Logout</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </header>\n        <main className=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n          <div className=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <Button variant=\"outline\" size=\"icon\" className=\"h-7 w-7\">\n                <ChevronLeft className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Back</span>\n              </Button>\n              <h1 className=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n                Pro Controller\n              </h1>\n              <Badge variant=\"outline\" className=\"ml-auto sm:ml-0\">\n                In stock\n              </Badge>\n              <div className=\"hidden items-center gap-2 md:ml-auto md:flex\">\n                <Button variant=\"outline\" size=\"sm\">\n                  Discard\n                </Button>\n                <Button size=\"sm\">Save Product</Button>\n              </div>\n            </div>\n            <div className=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n              <div className=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product details\">\n                  <CardHeader>\n                    <CardTitle>Product Details</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"name\">Name</Label>\n                        <Input\n                          id=\"name\"\n                          type=\"text\"\n                          className=\"w-full\"\n                          defaultValue=\"Gamer Gear Pro Controller\"\n                        />\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"description\">Description</Label>\n                        <Textarea\n                          id=\"description\"\n                          defaultValue=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                          className=\"min-h-32\"\n                        />\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product stock and variants\">\n                  <CardHeader>\n                    <CardTitle>Stock</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <Table>\n                      <TableHeader>\n                        <TableRow>\n                          <TableHead className=\"w-[100px]\">SKU</TableHead>\n                          <TableHead>Stock</TableHead>\n                          <TableHead>Price</TableHead>\n                          <TableHead className=\"w-[100px]\">Size</TableHead>\n                        </TableRow>\n                      </TableHeader>\n                      <TableBody>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-001\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-1\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-1\"\n                              type=\"number\"\n                              defaultValue=\"100\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-1\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-1\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-002\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-2\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-2\"\n                              type=\"number\"\n                              defaultValue=\"143\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-2\" className=\"sr-only\">\n                              Price\n                            </Label>\n                            <Input\n                              id=\"price-2\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"m\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                        <TableRow>\n                          <TableCell className=\"font-semibold\">\n                            GGPC-003\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"stock-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"stock-3\"\n                              type=\"number\"\n                              defaultValue=\"32\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <Label htmlFor=\"price-3\" className=\"sr-only\">\n                              Stock\n                            </Label>\n                            <Input\n                              id=\"price-3\"\n                              type=\"number\"\n                              defaultValue=\"99.99\"\n                            />\n                          </TableCell>\n                          <TableCell>\n                            <ToggleGroup\n                              type=\"single\"\n                              defaultValue=\"s\"\n                              variant=\"outline\"\n                            >\n                              <ToggleGroupItem value=\"s\">S</ToggleGroupItem>\n                              <ToggleGroupItem value=\"m\">M</ToggleGroupItem>\n                              <ToggleGroupItem value=\"l\">L</ToggleGroupItem>\n                            </ToggleGroup>\n                          </TableCell>\n                        </TableRow>\n                      </TableBody>\n                    </Table>\n                  </CardContent>\n                  <CardFooter className=\"justify-center border-t p-4\">\n                    <Button size=\"sm\" variant=\"ghost\" className=\"gap-1\">\n                      <PlusCircle className=\"h-3.5 w-3.5\" />\n                      Add Variant\n                    </Button>\n                  </CardFooter>\n                </Card>\n                <Card x-chunk=\"A card with a form to edit the product category and subcategory\">\n                  <CardHeader>\n                    <CardTitle>Product Category</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6 sm:grid-cols-3\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"category\">Category</Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"category\"\n                            aria-label=\"Select category\"\n                          >\n                            <SelectValue placeholder=\"Select category\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"clothing\">Clothing</SelectItem>\n                            <SelectItem value=\"electronics\">\n                              Electronics\n                            </SelectItem>\n                            <SelectItem value=\"accessories\">\n                              Accessories\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"subcategory\">\n                          Subcategory (optional)\n                        </Label>\n                        <Select>\n                          <SelectTrigger\n                            id=\"subcategory\"\n                            aria-label=\"Select subcategory\"\n                          >\n                            <SelectValue placeholder=\"Select subcategory\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"t-shirts\">T-Shirts</SelectItem>\n                            <SelectItem value=\"hoodies\">Hoodies</SelectItem>\n                            <SelectItem value=\"sweatshirts\">\n                              Sweatshirts\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </div>\n              <div className=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n                <Card x-chunk=\"A card with a form to edit the product status\">\n                  <CardHeader>\n                    <CardTitle>Product Status</CardTitle>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-6\">\n                      <div className=\"grid gap-3\">\n                        <Label htmlFor=\"status\">Status</Label>\n                        <Select>\n                          <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                            <SelectValue placeholder=\"Select status\" />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"draft\">Draft</SelectItem>\n                            <SelectItem value=\"published\">Active</SelectItem>\n                            <SelectItem value=\"archived\">Archived</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card\n                  className=\"overflow-hidden\"\n                  x-chunk=\"A card with a form to upload product images\"\n                >\n                  <CardHeader>\n                    <CardTitle>Product Images</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div className=\"grid gap-2\">\n                      <Image\n                        alt=\"Product image\"\n                        className=\"aspect-square w-full rounded-md object-cover\"\n                        height=\"300\"\n                        src=\"/placeholder.svg\"\n                        width=\"300\"\n                      />\n                      <div className=\"grid grid-cols-3 gap-2\">\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button>\n                          <Image\n                            alt=\"Product image\"\n                            className=\"aspect-square w-full rounded-md object-cover\"\n                            height=\"84\"\n                            src=\"/placeholder.svg\"\n                            width=\"84\"\n                          />\n                        </button>\n                        <button className=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                          <Upload className=\"h-4 w-4 text-muted-foreground\" />\n                          <span className=\"sr-only\">Upload</span>\n                        </button>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n                <Card x-chunk=\"A card with a call to action to archive the product\">\n                  <CardHeader>\n                    <CardTitle>Archive Product</CardTitle>\n                    <CardDescription>\n                      Lipsum dolor sit amet, consectetur adipiscing elit.\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <div></div>\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Archive Product\n                    </Button>\n                  </CardContent>\n                </Card>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-center gap-2 md:hidden\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">Save Product</Button>\n            </div>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
     }
   ],
diff --git a/apps/www/public/registry/styles/new-york/dialog.json b/apps/www/public/registry/styles/new-york/dialog.json
index 2183096dd3..8dff8dae5b 100644
--- a/apps/www/public/registry/styles/new-york/dialog.json
+++ b/apps/www/public/registry/styles/new-york/dialog.json
@@ -1,13 +1,13 @@
 {
   "name": "dialog",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/dialog.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/drawer.json b/apps/www/public/registry/styles/new-york/drawer.json
index 2a5e2ceabf..714a3f6031 100644
--- a/apps/www/public/registry/styles/new-york/drawer.json
+++ b/apps/www/public/registry/styles/new-york/drawer.json
@@ -1,6 +1,6 @@
 {
   "name": "drawer",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "vaul",
     "@radix-ui/react-dialog"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "ui/drawer.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root\n    shouldScaleBackground={shouldScaleBackground}\n    {...props}\n  />\n)\nDrawer.displayName = \"Drawer\"\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Overlay\n    ref={ref}\n    className={cn(\"fixed inset-0 z-50 bg-black/80\", className)}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DrawerPortal>\n    <DrawerOverlay />\n    <DrawerPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n      {children}\n    </DrawerPrimitive.Content>\n  </DrawerPortal>\n))\nDrawerContent.displayName = \"DrawerContent\"\n\nconst DrawerHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\n    {...props}\n  />\n)\nDrawerHeader.displayName = \"DrawerHeader\"\n\nconst DrawerFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    {...props}\n  />\n)\nDrawerFooter.displayName = \"DrawerFooter\"\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/dropdown-menu.json b/apps/www/public/registry/styles/new-york/dropdown-menu.json
index bcf7365ef2..f377c7c40c 100644
--- a/apps/www/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/public/registry/styles/new-york/dropdown-menu.json
@@ -1,13 +1,13 @@
 {
   "name": "dropdown-menu",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-dropdown-menu"
   ],
   "files": [
     {
       "path": "ui/dropdown-menu.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  DotFilledIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-4 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/form.json b/apps/www/public/registry/styles/new-york/form.json
index 7cd6f6fa7e..30fa1376bf 100644
--- a/apps/www/public/registry/styles/new-york/form.json
+++ b/apps/www/public/registry/styles/new-york/form.json
@@ -1,6 +1,6 @@
 {
   "name": "form",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-label",
     "@radix-ui/react-slot",
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "ui/form.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nconst FormItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  )\n})\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && \"text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/hello-block.json b/apps/www/public/registry/styles/new-york/hello-block.json
index db1db431de..b875578682 100644
--- a/apps/www/public/registry/styles/new-york/hello-block.json
+++ b/apps/www/public/registry/styles/new-york/hello-block.json
@@ -1,15 +1,21 @@
 {
   "name": "hello-block",
-  "type": "components:block",
+  "type": "registry:block",
   "registryDependencies": [
     "button",
-    "use-media-query"
+    "use-media-query",
+    "card"
   ],
   "files": [
     {
-      "path": "block/hello-block.tsx",
-      "type": "components:block",
-      "content": "\"use client\"\n\nimport { useMediaQuery } from \"@/registry/new-york/hooks/use-media-query\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ExampleBlock() {\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <div\n      className={cn(\n        \"p-12\",\n        isDesktop\n          ? \"bg-muted text-muted-foreground\"\n          : \"bg-primary text-primary-foreground\"\n      )}\n    >\n      <Button>A button</Button>\n    </div>\n  )\n}\n"
+      "path": "block/hello-block/hello-block.tsx",
+      "type": "registry:block",
+      "content": "\"use client\"\n\nimport { HelloCard } from \"@/registry/new-york/block/hello-block/components/hello-card\"\nimport { useMediaQuery } from \"@/registry/new-york/hooks/use-media-query\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function HelloBlock() {\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n  return (\n    <HelloCard\n      title=\"Hello Block\"\n      className={cn(\n        \"p-12\",\n        isDesktop\n          ? \"bg-muted text-muted-foreground\"\n          : \"bg-primary text-primary-foreground\"\n      )}\n    >\n      <p>Hello. This is a component inside a block.</p>\n      <p>You are currently on {isDesktop ? \"desktop\" : \"mobile\"}</p>\n      <Button>Click me</Button>\n    </HelloCard>\n  )\n}\n"
+    },
+    {
+      "path": "block/hello-block/components/hello-card.tsx",
+      "type": "registry:block",
+      "content": "import {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\n\nexport function HelloCard({\n  title,\n  children,\n  className,\n}: {\n  title: string\n} & React.ComponentProps<typeof Card>) {\n  return (\n    <Card className={className}>\n      <CardHeader>\n        <CardTitle className=\"text-brand-secondary text-4xl\">{title}</CardTitle>\n      </CardHeader>\n      <CardContent>{children}</CardContent>\n    </Card>\n  )\n}\n"
     }
   ],
   "tailwind": {
diff --git a/apps/www/public/registry/styles/new-york/hover-card.json b/apps/www/public/registry/styles/new-york/hover-card.json
index 812f1b7e3f..ab83a79441 100644
--- a/apps/www/public/registry/styles/new-york/hover-card.json
+++ b/apps/www/public/registry/styles/new-york/hover-card.json
@@ -1,13 +1,13 @@
 {
   "name": "hover-card",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-hover-card"
   ],
   "files": [
     {
       "path": "ui/hover-card.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/index.json b/apps/www/public/registry/styles/new-york/index.json
index fcffb264c0..f557d2a7ad 100644
--- a/apps/www/public/registry/styles/new-york/index.json
+++ b/apps/www/public/registry/styles/new-york/index.json
@@ -14,24 +14,11 @@
   ],
   "tailwind": {
     "config": {
-      "theme": {
-        "extend": {
-          "borderRadius": {
-            "lg": "var(--radius)",
-            "md": "calc(var(--radius) - 2px)",
-            "sm": "calc(var(--radius) - 4px)"
-          }
-        }
-      },
       "plugins": [
         "require(\"tailwindcss-animate\")"
       ]
     }
   },
-  "cssVars": {
-    "light": {
-      "--radius": "0.5rem"
-    }
-  },
+  "cssVars": {},
   "files": []
 }
\ No newline at end of file
diff --git a/apps/www/public/registry/styles/new-york/input-otp.json b/apps/www/public/registry/styles/new-york/input-otp.json
index 73ab2b4351..7c7893e9fa 100644
--- a/apps/www/public/registry/styles/new-york/input-otp.json
+++ b/apps/www/public/registry/styles/new-york/input-otp.json
@@ -1,13 +1,13 @@
 {
   "name": "input-otp",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "input-otp"
   ],
   "files": [
     {
       "path": "ui/input-otp.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DashIcon } from \"@radix-ui/react-icons\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n        isActive && \"z-10 ring-1 ring-ring\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n  <div ref={ref} role=\"separator\" {...props}>\n    <DashIcon />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/input.json b/apps/www/public/registry/styles/new-york/input.json
index 0ec0a79405..485e113e17 100644
--- a/apps/www/public/registry/styles/new-york/input.json
+++ b/apps/www/public/registry/styles/new-york/input.json
@@ -1,10 +1,10 @@
 {
   "name": "input",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/input.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/label.json b/apps/www/public/registry/styles/new-york/label.json
index f1e8aa16ca..56adaf9083 100644
--- a/apps/www/public/registry/styles/new-york/label.json
+++ b/apps/www/public/registry/styles/new-york/label.json
@@ -1,13 +1,13 @@
 {
   "name": "label",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-label"
   ],
   "files": [
     {
       "path": "ui/label.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/menubar.json b/apps/www/public/registry/styles/new-york/menubar.json
index 548059ec9c..9e119ee5bd 100644
--- a/apps/www/public/registry/styles/new-york/menubar.json
+++ b/apps/www/public/registry/styles/new-york/menubar.json
@@ -1,13 +1,13 @@
 {
   "name": "menubar",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-menubar"
   ],
   "files": [
     {
       "path": "ui/menubar.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  CheckIcon,\n  ChevronRightIcon,\n  DotFilledIcon,\n} from \"@radix-ui/react-icons\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <DotFilledIcon className=\"h-4 w-4 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/navigation-menu.json b/apps/www/public/registry/styles/new-york/navigation-menu.json
index d90eb3502b..b8353efe5e 100644
--- a/apps/www/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/public/registry/styles/new-york/navigation-menu.json
@@ -1,13 +1,13 @@
 {
   "name": "navigation-menu",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-navigation-menu"
   ],
   "files": [
     {
       "path": "ui/navigation-menu.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDownIcon\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/pagination.json b/apps/www/public/registry/styles/new-york/pagination.json
index 8a128cd8c7..6efdd00188 100644
--- a/apps/www/public/registry/styles/new-york/pagination.json
+++ b/apps/www/public/registry/styles/new-york/pagination.json
@@ -1,13 +1,13 @@
 {
   "name": "pagination",
-  "type": "components:ui",
+  "type": "registry:ui",
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
       "path": "ui/pagination.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeftIcon className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRightIcon className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/popover.json b/apps/www/public/registry/styles/new-york/popover.json
index bed1805296..de861e8364 100644
--- a/apps/www/public/registry/styles/new-york/popover.json
+++ b/apps/www/public/registry/styles/new-york/popover.json
@@ -1,13 +1,13 @@
 {
   "name": "popover",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-popover"
   ],
   "files": [
     {
       "path": "ui/popover.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/progress.json b/apps/www/public/registry/styles/new-york/progress.json
index bd4108a587..a5ca3a5f18 100644
--- a/apps/www/public/registry/styles/new-york/progress.json
+++ b/apps/www/public/registry/styles/new-york/progress.json
@@ -1,13 +1,13 @@
 {
   "name": "progress",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-progress"
   ],
   "files": [
     {
       "path": "ui/progress.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\",\n      className\n    )}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/radio-group.json b/apps/www/public/registry/styles/new-york/radio-group.json
index 92e251c6c9..4f295c1df7 100644
--- a/apps/www/public/registry/styles/new-york/radio-group.json
+++ b/apps/www/public/registry/styles/new-york/radio-group.json
@@ -1,13 +1,13 @@
 {
   "name": "radio-group",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-radio-group"
   ],
   "files": [
     {
       "path": "ui/radio-group.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <CheckIcon className=\"h-3.5 w-3.5 fill-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/resizable.json b/apps/www/public/registry/styles/new-york/resizable.json
index 9af2b0ecd3..2ecfacc6e3 100644
--- a/apps/www/public/registry/styles/new-york/resizable.json
+++ b/apps/www/public/registry/styles/new-york/resizable.json
@@ -1,13 +1,13 @@
 {
   "name": "resizable",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "react-resizable-panels"
   ],
   "files": [
     {
       "path": "ui/resizable.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/scroll-area.json b/apps/www/public/registry/styles/new-york/scroll-area.json
index 18bd7a5ca6..66c5ce5c15 100644
--- a/apps/www/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/public/registry/styles/new-york/scroll-area.json
@@ -1,13 +1,13 @@
 {
   "name": "scroll-area",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-scroll-area"
   ],
   "files": [
     {
       "path": "ui/scroll-area.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 flex-col border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/select.json b/apps/www/public/registry/styles/new-york/select.json
index d4a074a69e..7cae791ad3 100644
--- a/apps/www/public/registry/styles/new-york/select.json
+++ b/apps/www/public/registry/styles/new-york/select.json
@@ -1,13 +1,13 @@
 {
   "name": "select",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-select"
   ],
   "files": [
     {
       "path": "ui/select.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  CaretSortIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n} from \"@radix-ui/react-icons\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <CaretSortIcon className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronUpIcon />\n  </SelectPrimitive.ScrollUpButton>\n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\n      \"flex cursor-default items-center justify-center py-1\",\n      className\n    )}\n    {...props}\n  >\n    <ChevronDownIcon />\n  </SelectPrimitive.ScrollDownButton>\n))\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <CheckIcon className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/separator.json b/apps/www/public/registry/styles/new-york/separator.json
index afefd7cd15..dea3c142fa 100644
--- a/apps/www/public/registry/styles/new-york/separator.json
+++ b/apps/www/public/registry/styles/new-york/separator.json
@@ -1,13 +1,13 @@
 {
   "name": "separator",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-separator"
   ],
   "files": [
     {
       "path": "ui/separator.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/sheet.json b/apps/www/public/registry/styles/new-york/sheet.json
index 98c97b71e4..a6ed422e0b 100644
--- a/apps/www/public/registry/styles/new-york/sheet.json
+++ b/apps/www/public/registry/styles/new-york/sheet.json
@@ -1,13 +1,13 @@
 {
   "name": "sheet",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-dialog"
   ],
   "files": [
     {
       "path": "ui/sheet.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n      {children}\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/skeleton.json b/apps/www/public/registry/styles/new-york/skeleton.json
index 236e089720..77d061de8d 100644
--- a/apps/www/public/registry/styles/new-york/skeleton.json
+++ b/apps/www/public/registry/styles/new-york/skeleton.json
@@ -1,10 +1,10 @@
 {
   "name": "skeleton",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/skeleton.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-primary/10\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/slider.json b/apps/www/public/registry/styles/new-york/slider.json
index 1309c2adb8..a6c62680ab 100644
--- a/apps/www/public/registry/styles/new-york/slider.json
+++ b/apps/www/public/registry/styles/new-york/slider.json
@@ -1,13 +1,13 @@
 {
   "name": "slider",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-slider"
   ],
   "files": [
     {
       "path": "ui/slider.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center\",\n      className\n    )}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className=\"block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderPrimitive.Root>\n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/sonner.json b/apps/www/public/registry/styles/new-york/sonner.json
index 4910558032..24efe1b36e 100644
--- a/apps/www/public/registry/styles/new-york/sonner.json
+++ b/apps/www/public/registry/styles/new-york/sonner.json
@@ -1,6 +1,6 @@
 {
   "name": "sonner",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "sonner",
     "next-themes"
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "ui/sonner.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg\",\n          description: \"group-[.toast]:text-muted-foreground\",\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/switch.json b/apps/www/public/registry/styles/new-york/switch.json
index 9c303127e1..6c2ef439f6 100644
--- a/apps/www/public/registry/styles/new-york/switch.json
+++ b/apps/www/public/registry/styles/new-york/switch.json
@@ -1,13 +1,13 @@
 {
   "name": "switch",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-switch"
   ],
   "files": [
     {
       "path": "ui/switch.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/table.json b/apps/www/public/registry/styles/new-york/table.json
index b53c7c8466..d1111d7896 100644
--- a/apps/www/public/registry/styles/new-york/table.json
+++ b/apps/www/public/registry/styles/new-york/table.json
@@ -1,10 +1,10 @@
 {
   "name": "table",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/table.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/tabs.json b/apps/www/public/registry/styles/new-york/tabs.json
index 3962e599f6..a12cf43b51 100644
--- a/apps/www/public/registry/styles/new-york/tabs.json
+++ b/apps/www/public/registry/styles/new-york/tabs.json
@@ -1,13 +1,13 @@
 {
   "name": "tabs",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-tabs"
   ],
   "files": [
     {
       "path": "ui/tabs.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/textarea.json b/apps/www/public/registry/styles/new-york/textarea.json
index 7a51e84906..867cdfd48e 100644
--- a/apps/www/public/registry/styles/new-york/textarea.json
+++ b/apps/www/public/registry/styles/new-york/textarea.json
@@ -1,10 +1,10 @@
 {
   "name": "textarea",
-  "type": "components:ui",
+  "type": "registry:ui",
   "files": [
     {
       "path": "ui/textarea.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/toast.json b/apps/www/public/registry/styles/new-york/toast.json
index d460d9ace1..a11fd13894 100644
--- a/apps/www/public/registry/styles/new-york/toast.json
+++ b/apps/www/public/registry/styles/new-york/toast.json
@@ -1,23 +1,23 @@
 {
   "name": "toast",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-toast"
   ],
   "files": [
     {
       "path": "ui/toast.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]\",\n      className\n    )}\n    {...props}\n  />\n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n  \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n  {\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Toast = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n    VariantProps<typeof toastVariants>\n>(({ className, variant, ...props }, ref) => {\n  return (\n    <ToastPrimitives.Root\n      ref={ref}\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Action>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Action\n    ref={ref}\n    className={cn(\n      \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive\",\n      className\n    )}\n    {...props}\n  />\n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Close>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Close\n    ref={ref}\n    className={cn(\n      \"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600\",\n      className\n    )}\n    toast-close=\"\"\n    {...props}\n  >\n    <Cross2Icon className=\"h-4 w-4\" />\n  </ToastPrimitives.Close>\n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Title>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Title\n    ref={ref}\n    className={cn(\"text-sm font-semibold [&+div]:text-xs\", className)}\n    {...props}\n  />\n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitives.Description>,\n  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>\n>(({ className, ...props }, ref) => (\n  <ToastPrimitives.Description\n    ref={ref}\n    className={cn(\"text-sm opacity-90\", className)}\n    {...props}\n  />\n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>\n\nexport {\n  type ToastProps,\n  type ToastActionElement,\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastClose,\n  ToastAction,\n}\n"
     },
     {
       "path": "ui/use-toast.ts",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\"\n\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/new-york/ui/toast\"\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000000\n\ntype ToasterToast = ToastProps & {\n  id: string\n  title?: React.ReactNode\n  description?: React.ReactNode\n  action?: ToastActionElement\n}\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n} as const\n\nlet count = 0\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\n  return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"]\n      toast: ToasterToast\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"]\n      toast: Partial<ToasterToast>\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"]\n      toastId?: ToasterToast[\"id\"]\n    }\n\ninterface State {\n  toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId)\n    dispatch({\n      type: \"REMOVE_TOAST\",\n      toastId: toastId,\n    })\n  }, TOAST_REMOVE_DELAY)\n\n  toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      }\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\n        ),\n      }\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId)\n      } else {\n        state.toasts.forEach((toast) => {\n          addToRemoveQueue(toast.id)\n        })\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t\n        ),\n      }\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        }\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      }\n  }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action)\n  listeners.forEach((listener) => {\n    listener(memoryState)\n  })\n}\n\ntype Toast = Omit<ToasterToast, \"id\">\n\nfunction toast({ ...props }: Toast) {\n  const id = genId()\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      type: \"UPDATE_TOAST\",\n      toast: { ...props, id },\n    })\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\n\n  dispatch({\n    type: \"ADD_TOAST\",\n    toast: {\n      ...props,\n      id,\n      open: true,\n      onOpenChange: (open) => {\n        if (!open) dismiss()\n      },\n    },\n  })\n\n  return {\n    id: id,\n    dismiss,\n    update,\n  }\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState)\n\n  React.useEffect(() => {\n    listeners.push(setState)\n    return () => {\n      const index = listeners.indexOf(setState)\n      if (index > -1) {\n        listeners.splice(index, 1)\n      }\n    }\n  }, [state])\n\n  return {\n    ...state,\n    toast,\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\n  }\n}\n\nexport { useToast, toast }\n"
     },
     {
       "path": "ui/toaster.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/new-york/ui/toast\"\nimport { useToast } from \"@/registry/new-york/ui/use-toast\"\n\nexport function Toaster() {\n  const { toasts } = useToast()\n\n  return (\n    <ToastProvider>\n      {toasts.map(function ({ id, title, description, action, ...props }) {\n        return (\n          <Toast key={id} {...props}>\n            <div className=\"grid gap-1\">\n              {title && <ToastTitle>{title}</ToastTitle>}\n              {description && (\n                <ToastDescription>{description}</ToastDescription>\n              )}\n            </div>\n            {action}\n            <ToastClose />\n          </Toast>\n        )\n      })}\n      <ToastViewport />\n    </ToastProvider>\n  )\n}\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/toggle-group.json b/apps/www/public/registry/styles/new-york/toggle-group.json
index 763b1e0846..52a0b00ebb 100644
--- a/apps/www/public/registry/styles/new-york/toggle-group.json
+++ b/apps/www/public/registry/styles/new-york/toggle-group.json
@@ -1,6 +1,6 @@
 {
   "name": "toggle-group",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-toggle-group"
   ],
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "ui/toggle-group.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\"flex items-center justify-center gap-1\", className)}\n    {...props}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n    VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/toggle.json b/apps/www/public/registry/styles/new-york/toggle.json
index e14eb18caf..f8dd9fd2af 100644
--- a/apps/www/public/registry/styles/new-york/toggle.json
+++ b/apps/www/public/registry/styles/new-york/toggle.json
@@ -1,13 +1,13 @@
 {
   "name": "toggle",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-toggle"
   ],
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-3\",\n        sm: \"h-8 px-2\",\n        lg: \"h-10 px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/tooltip.json b/apps/www/public/registry/styles/new-york/tooltip.json
index 563275c256..50c262646e 100644
--- a/apps/www/public/registry/styles/new-york/tooltip.json
+++ b/apps/www/public/registry/styles/new-york/tooltip.json
@@ -1,13 +1,13 @@
 {
   "name": "tooltip",
-  "type": "components:ui",
+  "type": "registry:ui",
   "dependencies": [
     "@radix-ui/react-tooltip"
   ],
   "files": [
     {
       "path": "ui/tooltip.tsx",
-      "type": "components:ui",
+      "type": "registry:ui",
       "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/use-media-query.json b/apps/www/public/registry/styles/new-york/use-media-query.json
new file mode 100644
index 0000000000..d2b1781d52
--- /dev/null
+++ b/apps/www/public/registry/styles/new-york/use-media-query.json
@@ -0,0 +1,14 @@
+{
+  "name": "use-media-query",
+  "type": "registry:hook",
+  "dependencies": [
+    "@react-hook/window-size@1.0.3"
+  ],
+  "files": [
+    {
+      "path": "hooks/use-media-query.ts",
+      "type": "registry:hook",
+      "content": "import * as React from \"react\"\n\nexport function useMediaQuery(query: string) {\n  const [value, setValue] = React.useState(false)\n\n  React.useEffect(() => {\n    function onChange(event: MediaQueryListEvent) {\n      setValue(event.matches)\n    }\n\n    const result = matchMedia(query)\n    result.addEventListener(\"change\", onChange)\n    setValue(result.matches)\n\n    return () => result.removeEventListener(\"change\", onChange)\n  }, [query])\n\n  return value\n}\n"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json
index 71297ad3f7..4d3e0ae64d 100644
--- a/apps/www/public/schema.json
+++ b/apps/www/public/schema.json
@@ -44,6 +44,12 @@
         },
         "ui": {
           "type": "string"
+        },
+        "lib": {
+          "type": "string"
+        },
+        "hooks": {
+          "type": "string"
         }
       },
       "required": ["utils", "components"]
diff --git a/apps/www/registry/blocks.ts b/apps/www/registry/blocks.ts
index 72a25897e5..2e6675254c 100644
--- a/apps/www/registry/blocks.ts
+++ b/apps/www/registry/blocks.ts
@@ -3,9 +3,18 @@ import { Registry } from "@/registry/schema"
 export const blocks: Registry = [
   {
     name: "hello-block",
-    type: "components:block",
-    registryDependencies: ["button", "use-media-query"],
-    files: ["block/hello-block.tsx"],
+    type: "registry:block",
+    registryDependencies: ["button", "use-media-query", "card"],
+    files: [
+      {
+        path: "block/hello-block/hello-block.tsx",
+        type: "registry:block",
+      },
+      {
+        path: "block/hello-block/components/hello-card.tsx",
+        type: "registry:block",
+      },
+    ],
     tailwind: {
       config: {
         theme: {
@@ -38,7 +47,7 @@ export const blocks: Registry = [
   },
   {
     name: "charts-01",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["chart"],
     files: ["block/charts-01.tsx"],
     category: "Application",
@@ -46,7 +55,7 @@ export const blocks: Registry = [
   },
   {
     name: "dashboard-05",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: [
       "badge",
       "breadcrumb",
@@ -68,7 +77,7 @@ export const blocks: Registry = [
   },
   {
     name: "dashboard-06",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: [
       "badge",
       "breadcrumb",
@@ -87,7 +96,7 @@ export const blocks: Registry = [
   },
   {
     name: "dashboard-07",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: [
       "badge",
       "breadcrumb",
@@ -109,7 +118,7 @@ export const blocks: Registry = [
   },
   {
     name: "dashboard-04",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["button", "card", "dropdown-menu", "input"],
     files: ["block/dashboard-04.tsx"],
     category: "Application",
@@ -117,7 +126,7 @@ export const blocks: Registry = [
   },
   {
     name: "dashboard-03",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: [
       "badge",
       "button",
@@ -134,7 +143,7 @@ export const blocks: Registry = [
   },
   {
     name: "dashboard-02",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["badge", "button", "card", "dropdown-menu", "input"],
     files: ["block/dashboard-02.tsx"],
     category: "Application",
@@ -142,7 +151,7 @@ export const blocks: Registry = [
   },
   {
     name: "dashboard-01",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["button", "dropdown-menu", "input", "sheet"],
     files: ["block/dashboard-01.tsx"],
     category: "Application",
@@ -150,7 +159,7 @@ export const blocks: Registry = [
   },
   {
     name: "authentication-01",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["button", "card", "input", "label"],
     files: ["block/authentication-01.tsx"],
     category: "Authentication",
@@ -158,7 +167,7 @@ export const blocks: Registry = [
   },
   {
     name: "authentication-02",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["button", "card", "input", "label"],
     files: ["block/authentication-02.tsx"],
     category: "Authentication",
@@ -166,7 +175,7 @@ export const blocks: Registry = [
   },
   {
     name: "authentication-03",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["button", "card", "input", "label"],
     files: ["block/authentication-03.tsx"],
     category: "Authentication",
@@ -174,7 +183,7 @@ export const blocks: Registry = [
   },
   {
     name: "authentication-04",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["button", "card", "input", "label"],
     files: ["block/authentication-04.tsx"],
     category: "Authentication",
diff --git a/apps/www/registry/charts.ts b/apps/www/registry/charts.ts
index 7b3a87b38c..9974aa4168 100644
--- a/apps/www/registry/charts.ts
+++ b/apps/www/registry/charts.ts
@@ -4,7 +4,7 @@ export const charts: Registry = [
   // Area Charts
   {
     name: "chart-area-axes",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-axes.tsx"],
     category: "Charts",
@@ -12,7 +12,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-default",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-default.tsx"],
     category: "Charts",
@@ -20,7 +20,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-gradient",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-gradient.tsx"],
     category: "Charts",
@@ -28,7 +28,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-icons",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-icons.tsx"],
     category: "Charts",
@@ -36,7 +36,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-interactive",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-interactive.tsx"],
     category: "Charts",
@@ -44,7 +44,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-legend",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-legend.tsx"],
     category: "Charts",
@@ -52,7 +52,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-linear",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-linear.tsx"],
     category: "Charts",
@@ -60,7 +60,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-stacked-expand",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-stacked-expand.tsx"],
     category: "Charts",
@@ -68,7 +68,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-stacked",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-stacked.tsx"],
     category: "Charts",
@@ -76,7 +76,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-area-step",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-area-step.tsx"],
     category: "Charts",
@@ -86,7 +86,7 @@ export const charts: Registry = [
   // Bar Charts
   {
     name: "chart-bar-active",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-active.tsx"],
     category: "Charts",
@@ -94,7 +94,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-default",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-default.tsx"],
     category: "Charts",
@@ -102,7 +102,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-horizontal",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-horizontal.tsx"],
     category: "Charts",
@@ -110,7 +110,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-interactive",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-interactive.tsx"],
     category: "Charts",
@@ -118,7 +118,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-label-custom",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-label-custom.tsx"],
     category: "Charts",
@@ -126,7 +126,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-label",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-label.tsx"],
     category: "Charts",
@@ -134,7 +134,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-mixed",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-mixed.tsx"],
     category: "Charts",
@@ -142,7 +142,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-multiple",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-multiple.tsx"],
     category: "Charts",
@@ -150,7 +150,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-negative",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-negative.tsx"],
     category: "Charts",
@@ -158,7 +158,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-bar-stacked",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-bar-stacked.tsx"],
     category: "Charts",
@@ -168,7 +168,7 @@ export const charts: Registry = [
   // Line Charts
   {
     name: "chart-line-default",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-default.tsx"],
     category: "Charts",
@@ -176,7 +176,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-dots-colors",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-dots-colors.tsx"],
     category: "Charts",
@@ -184,7 +184,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-dots-custom",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-dots-custom.tsx"],
     category: "Charts",
@@ -192,7 +192,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-dots",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-dots.tsx"],
     category: "Charts",
@@ -200,7 +200,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-interactive",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-interactive.tsx"],
     category: "Charts",
@@ -208,7 +208,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-label-custom",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-label-custom.tsx"],
     category: "Charts",
@@ -216,7 +216,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-label",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-label.tsx"],
     category: "Charts",
@@ -224,7 +224,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-linear",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-linear.tsx"],
     category: "Charts",
@@ -232,7 +232,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-multiple",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-multiple.tsx"],
     category: "Charts",
@@ -240,7 +240,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-line-step",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-line-step.tsx"],
     category: "Charts",
@@ -250,7 +250,7 @@ export const charts: Registry = [
   // Pie Charts
   {
     name: "chart-pie-donut-active",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-donut-active.tsx"],
     category: "Charts",
@@ -258,7 +258,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-donut-text",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-donut-text.tsx"],
     category: "Charts",
@@ -266,7 +266,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-donut",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-donut.tsx"],
     category: "Charts",
@@ -274,7 +274,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-interactive",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-interactive.tsx"],
     category: "Charts",
@@ -282,7 +282,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-label-custom",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-label-custom.tsx"],
     category: "Charts",
@@ -290,7 +290,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-label-list",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-label-list.tsx"],
     category: "Charts",
@@ -298,7 +298,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-label",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-label.tsx"],
     category: "Charts",
@@ -306,7 +306,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-legend",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-legend.tsx"],
     category: "Charts",
@@ -314,7 +314,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-separator-none",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-separator-none.tsx"],
     category: "Charts",
@@ -322,7 +322,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-simple",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-simple.tsx"],
     category: "Charts",
@@ -330,7 +330,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-pie-stacked",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-pie-stacked.tsx"],
     category: "Charts",
@@ -340,7 +340,7 @@ export const charts: Registry = [
   // Radar Charts
   {
     name: "chart-radar-default",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-default.tsx"],
     category: "Charts",
@@ -348,7 +348,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-dots",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-dots.tsx"],
     category: "Charts",
@@ -356,7 +356,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-grid-circle-fill",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-grid-circle-fill.tsx"],
     category: "Charts",
@@ -364,7 +364,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-grid-circle-no-lines",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-grid-circle-no-lines.tsx"],
     category: "Charts",
@@ -372,7 +372,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-grid-circle",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-grid-circle.tsx"],
     category: "Charts",
@@ -380,7 +380,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-grid-custom",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-grid-custom.tsx"],
     category: "Charts",
@@ -388,7 +388,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-grid-fill",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-grid-fill.tsx"],
     category: "Charts",
@@ -396,7 +396,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-grid-none",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-grid-none.tsx"],
     category: "Charts",
@@ -404,7 +404,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-icons",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-icons.tsx"],
     category: "Charts",
@@ -412,7 +412,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-label-custom",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-label-custom.tsx"],
     category: "Charts",
@@ -420,7 +420,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-legend",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-legend.tsx"],
     category: "Charts",
@@ -428,7 +428,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-lines-only",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-lines-only.tsx"],
     category: "Charts",
@@ -436,7 +436,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-multiple",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-multiple.tsx"],
     category: "Charts",
@@ -444,7 +444,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radar-radius",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radar-radius.tsx"],
     category: "Charts",
@@ -454,7 +454,7 @@ export const charts: Registry = [
   // Radial Charts
   {
     name: "chart-radial-grid",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radial-grid.tsx"],
     category: "Charts",
@@ -462,7 +462,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radial-label",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radial-label.tsx"],
     category: "Charts",
@@ -470,7 +470,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radial-shape",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radial-shape.tsx"],
     category: "Charts",
@@ -478,7 +478,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radial-simple",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radial-simple.tsx"],
     category: "Charts",
@@ -486,7 +486,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radial-stacked",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radial-stacked.tsx"],
     category: "Charts",
@@ -494,7 +494,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-radial-text",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-radial-text.tsx"],
     category: "Charts",
@@ -502,7 +502,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-default",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-default.tsx"],
     category: "Charts",
@@ -510,7 +510,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-indicator-line",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-indicator-line.tsx"],
     category: "Charts",
@@ -518,7 +518,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-indicator-none",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-indicator-none.tsx"],
     category: "Charts",
@@ -526,7 +526,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-label-none",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-label-none.tsx"],
     category: "Charts",
@@ -534,7 +534,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-label-custom",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-label-custom.tsx"],
     category: "Charts",
@@ -542,7 +542,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-label-formatter",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-label-formatter.tsx"],
     category: "Charts",
@@ -550,7 +550,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-formatter",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-formatter.tsx"],
     category: "Charts",
@@ -558,7 +558,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-icons",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-icons.tsx"],
     category: "Charts",
@@ -566,7 +566,7 @@ export const charts: Registry = [
   },
   {
     name: "chart-tooltip-advanced",
-    type: "components:block",
+    type: "registry:block",
     registryDependencies: ["card", "chart"],
     files: ["block/chart-tooltip-advanced.tsx"],
     category: "Charts",
diff --git a/apps/www/registry/default/block/hello-block/components/hello-card.tsx b/apps/www/registry/default/block/hello-block/components/hello-card.tsx
new file mode 100644
index 0000000000..5007e0c032
--- /dev/null
+++ b/apps/www/registry/default/block/hello-block/components/hello-card.tsx
@@ -0,0 +1,23 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+
+export function HelloCard({
+  title,
+  children,
+  className,
+}: {
+  title: string
+} & React.ComponentProps<typeof Card>) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-brand-secondary text-4xl">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/default/block/hello-block/hello-block.tsx b/apps/www/registry/default/block/hello-block/hello-block.tsx
new file mode 100644
index 0000000000..f9007bfccf
--- /dev/null
+++ b/apps/www/registry/default/block/hello-block/hello-block.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { HelloCard } from "@/registry/default/block/hello-block/components/hello-card"
+import { useMediaQuery } from "@/registry/default/hooks/use-media-query"
+import { cn } from "@/registry/default/lib/utils"
+import { Button } from "@/registry/default/ui/button"
+
+export default function HelloBlock() {
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  return (
+    <HelloCard
+      title="Hello Block"
+      className={cn(
+        "p-12",
+        isDesktop
+          ? "bg-muted text-muted-foreground"
+          : "bg-primary text-primary-foreground"
+      )}
+    >
+      <p>Hello. This is a component inside a block.</p>
+      <p>You are currently on {isDesktop ? "desktop" : "mobile"}</p>
+      <Button>Click me</Button>
+    </HelloCard>
+  )
+}
diff --git a/apps/www/registry/default/hooks/use-media-query.tsx b/apps/www/registry/default/hooks/use-media-query.ts
similarity index 100%
rename from apps/www/registry/default/hooks/use-media-query.tsx
rename to apps/www/registry/default/hooks/use-media-query.ts
diff --git a/apps/www/registry/examples.ts b/apps/www/registry/examples.ts
index 9fc778a159..4fe1f370f9 100644
--- a/apps/www/registry/examples.ts
+++ b/apps/www/registry/examples.ts
@@ -3,878 +3,873 @@ import { Registry } from "@/registry/schema"
 export const examples: Registry = [
   {
     name: "accordion-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["accordion"],
     files: ["example/accordion-demo.tsx"],
   },
   {
     name: "alert-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["alert"],
     files: ["example/alert-demo.tsx"],
   },
   {
     name: "alert-destructive",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["alert"],
     files: ["example/alert-destructive.tsx"],
   },
   {
     name: "alert-dialog-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["alert-dialog", "button"],
     files: ["example/alert-dialog-demo.tsx"],
   },
   {
     name: "aspect-ratio-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["aspect-ratio"],
     files: ["example/aspect-ratio-demo.tsx"],
   },
   {
     name: "avatar-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["avatar"],
     files: ["example/avatar-demo.tsx"],
   },
   {
     name: "badge-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["badge"],
     files: ["example/badge-demo.tsx"],
   },
   {
     name: "badge-destructive",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["badge"],
     files: ["example/badge-destructive.tsx"],
   },
   {
     name: "badge-outline",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["badge"],
     files: ["example/badge-outline.tsx"],
   },
   {
     name: "badge-secondary",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["badge"],
     files: ["example/badge-secondary.tsx"],
   },
   {
     name: "breadcrumb-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: ["example/breadcrumb-demo.tsx"],
   },
   {
     name: "breadcrumb-separator",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: ["example/breadcrumb-separator.tsx"],
   },
   {
     name: "breadcrumb-dropdown",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: ["example/breadcrumb-dropdown.tsx"],
   },
   {
     name: "breadcrumb-ellipsis",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: ["example/breadcrumb-ellipsis.tsx"],
   },
   {
     name: "breadcrumb-link",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: ["example/breadcrumb-link.tsx"],
   },
   {
     name: "breadcrumb-responsive",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["breadcrumb"],
     files: ["example/breadcrumb-responsive.tsx"],
   },
   {
     name: "button-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-demo.tsx"],
   },
   {
     name: "button-secondary",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-secondary.tsx"],
   },
   {
     name: "button-destructive",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-destructive.tsx"],
   },
   {
     name: "button-outline",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-outline.tsx"],
   },
   {
     name: "button-ghost",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-ghost.tsx"],
   },
   {
     name: "button-link",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-link.tsx"],
   },
   {
     name: "button-with-icon",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-with-icon.tsx"],
   },
   {
     name: "button-loading",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-loading.tsx"],
   },
   {
     name: "button-icon",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-icon.tsx"],
   },
   {
     name: "button-as-child",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button"],
     files: ["example/button-as-child.tsx"],
   },
   {
     name: "calendar-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["calendar"],
     files: ["example/calendar-demo.tsx"],
   },
   {
     name: "calendar-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["calendar", "form", "popover"],
     files: ["example/calendar-form.tsx"],
   },
   {
     name: "card-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["card", "button", "switch"],
     files: ["example/card-demo.tsx"],
   },
   {
     name: "card-with-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button", "card", "input", "label", "select"],
     files: ["example/card-with-form.tsx"],
   },
   {
     name: "carousel-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["carousel"],
     files: ["example/carousel-demo.tsx"],
   },
   {
     name: "carousel-size",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["carousel"],
     files: ["example/carousel-size.tsx"],
   },
   {
     name: "carousel-spacing",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["carousel"],
     files: ["example/carousel-spacing.tsx"],
   },
   {
     name: "carousel-orientation",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["carousel"],
     files: ["example/carousel-orientation.tsx"],
   },
   {
     name: "carousel-api",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["carousel"],
     files: ["example/carousel-api.tsx"],
   },
   {
     name: "carousel-plugin",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["carousel"],
     files: ["example/carousel-plugin.tsx"],
   },
   {
     name: "checkbox-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["checkbox"],
     files: ["example/checkbox-demo.tsx"],
   },
   {
     name: "checkbox-disabled",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["checkbox"],
     files: ["example/checkbox-disabled.tsx"],
   },
   {
     name: "checkbox-form-multiple",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["checkbox", "form"],
     files: ["example/checkbox-form-multiple.tsx"],
   },
   {
     name: "checkbox-form-single",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["checkbox", "form"],
     files: ["example/checkbox-form-single.tsx"],
   },
   {
     name: "checkbox-with-text",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["checkbox"],
     files: ["example/checkbox-with-text.tsx"],
   },
   {
     name: "collapsible-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["collapsible"],
     files: ["example/collapsible-demo.tsx"],
   },
   {
     name: "combobox-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["command"],
     files: ["example/combobox-demo.tsx"],
   },
   {
     name: "combobox-dropdown-menu",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["command", "dropdown-menu", "button"],
     files: ["example/combobox-dropdown-menu.tsx"],
   },
   {
     name: "combobox-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["command", "form"],
     files: ["example/combobox-form.tsx"],
   },
   {
     name: "combobox-popover",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["combobox", "popover"],
     files: ["example/combobox-popover.tsx"],
   },
   {
     name: "combobox-responsive",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["combobox", "popover", "drawer"],
     files: ["example/combobox-responsive.tsx"],
   },
   {
     name: "command-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["command"],
     files: ["example/command-demo.tsx"],
   },
   {
     name: "command-dialog",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["command", "dialog"],
     files: ["example/command-dialog.tsx"],
   },
   {
     name: "context-menu-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["context-menu"],
     files: ["example/context-menu-demo.tsx"],
   },
   {
     name: "data-table-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["data-table"],
     files: ["example/data-table-demo.tsx"],
   },
   {
     name: "date-picker-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button", "calendar", "popover"],
     files: ["example/date-picker-demo.tsx"],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button", "calendar", "form", "popover"],
     files: ["example/date-picker-form.tsx"],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-with-presets",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button", "calendar", "popover", "select"],
     files: ["example/date-picker-with-presets.tsx"],
     dependencies: ["date-fns"],
   },
   {
     name: "date-picker-with-range",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["button", "calendar", "popover"],
     files: ["example/date-picker-with-range.tsx"],
     dependencies: ["date-fns"],
   },
   {
     name: "dialog-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["dialog"],
     files: ["example/dialog-demo.tsx"],
   },
   {
     name: "dialog-close-button",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["dialog", "button"],
     files: ["example/dialog-close-button.tsx"],
   },
   {
     name: "drawer-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["drawer"],
     files: ["example/drawer-demo.tsx"],
   },
   {
     name: "drawer-dialog",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["drawer", "dialog"],
     files: ["example/drawer-dialog.tsx"],
   },
   {
     name: "dropdown-menu-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["dropdown-menu"],
     files: ["example/dropdown-menu-demo.tsx"],
   },
   {
     name: "dropdown-menu-checkboxes",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["dropdown-menu", "checkbox"],
     files: ["example/dropdown-menu-checkboxes.tsx"],
   },
   {
     name: "dropdown-menu-radio-group",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["dropdown-menu", "radio-group"],
     files: ["example/dropdown-menu-radio-group.tsx"],
   },
   {
     name: "hover-card-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["hover-card"],
     files: ["example/hover-card-demo.tsx"],
   },
   {
     name: "input-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input"],
     files: ["example/input-demo.tsx"],
   },
   {
     name: "input-disabled",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input"],
     files: ["example/input-disabled.tsx"],
   },
   {
     name: "input-file",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input"],
     files: ["example/input-file.tsx"],
   },
   {
     name: "input-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input", "button", "form"],
     files: ["example/input-form.tsx"],
   },
   {
     name: "input-with-button",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input", "button"],
     files: ["example/input-with-button.tsx"],
   },
   {
     name: "input-with-label",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input", "button", "label"],
     files: ["example/input-with-label.tsx"],
   },
   {
     name: "input-with-text",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input", "button", "label"],
     files: ["example/input-with-text.tsx"],
   },
   {
     name: "input-otp-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input-otp"],
     files: ["example/input-otp-demo.tsx"],
   },
   {
     name: "input-otp-pattern",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input-otp"],
     files: ["example/input-otp-pattern.tsx"],
   },
   {
     name: "input-otp-separator",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input-otp"],
     files: ["example/input-otp-separator.tsx"],
   },
   {
     name: "input-otp-controlled",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input-otp"],
     files: ["example/input-otp-controlled.tsx"],
   },
   {
     name: "input-otp-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["input-otp", "form"],
     files: ["example/input-otp-form.tsx"],
   },
   {
     name: "label-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["label"],
     files: ["example/label-demo.tsx"],
   },
   {
     name: "menubar-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["menubar"],
     files: ["example/menubar-demo.tsx"],
   },
   {
     name: "navigation-menu-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["navigation-menu"],
     files: ["example/navigation-menu-demo.tsx"],
   },
   {
     name: "pagination-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["pagination"],
     files: ["example/pagination-demo.tsx"],
   },
   {
     name: "popover-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["popover"],
     files: ["example/popover-demo.tsx"],
   },
   {
     name: "progress-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["progress"],
     files: ["example/progress-demo.tsx"],
   },
   {
     name: "radio-group-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["radio-group"],
     files: ["example/radio-group-demo.tsx"],
   },
   {
     name: "radio-group-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["radio-group", "form"],
     files: ["example/radio-group-form.tsx"],
   },
   {
     name: "resizable-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["resizable"],
     files: ["example/resizable-demo.tsx"],
   },
   {
     name: "resizable-demo-with-handle",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["resizable"],
     files: ["example/resizable-demo-with-handle.tsx"],
   },
   {
     name: "resizable-vertical",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["resizable"],
     files: ["example/resizable-vertical.tsx"],
   },
   {
     name: "resizable-handle",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["resizable"],
     files: ["example/resizable-handle.tsx"],
   },
   {
     name: "scroll-area-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["scroll-area"],
     files: ["example/scroll-area-demo.tsx"],
   },
   {
     name: "scroll-area-horizontal-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["scroll-area"],
     files: ["example/scroll-area-horizontal-demo.tsx"],
   },
   {
     name: "select-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["select"],
     files: ["example/select-demo.tsx"],
   },
   {
     name: "select-scrollable",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["select"],
     files: ["example/select-scrollable.tsx"],
   },
   {
     name: "select-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["select"],
     files: ["example/select-form.tsx"],
   },
   {
     name: "separator-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["separator"],
     files: ["example/separator-demo.tsx"],
   },
   {
     name: "sheet-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["sheet"],
     files: ["example/sheet-demo.tsx"],
   },
   {
     name: "sheet-side",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["sheet"],
     files: ["example/sheet-side.tsx"],
   },
   {
     name: "skeleton-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["skeleton"],
     files: ["example/skeleton-demo.tsx"],
   },
   {
     name: "skeleton-card",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["skeleton"],
     files: ["example/skeleton-card.tsx"],
   },
   {
     name: "slider-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["slider"],
     files: ["example/slider-demo.tsx"],
   },
   {
     name: "sonner-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["sonner"],
     files: ["example/sonner-demo.tsx"],
   },
   {
     name: "switch-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["switch"],
     files: ["example/switch-demo.tsx"],
   },
   {
     name: "switch-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["switch", "form"],
     files: ["example/switch-form.tsx"],
   },
   {
     name: "table-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["table"],
     files: ["example/table-demo.tsx"],
   },
   {
     name: "tabs-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["tabs"],
     files: ["example/tabs-demo.tsx"],
   },
   {
     name: "textarea-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["textarea"],
     files: ["example/textarea-demo.tsx"],
   },
   {
     name: "textarea-disabled",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["textarea"],
     files: ["example/textarea-disabled.tsx"],
   },
   {
     name: "textarea-form",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["textarea", "form"],
     files: ["example/textarea-form.tsx"],
   },
   {
     name: "textarea-with-button",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["textarea", "button"],
     files: ["example/textarea-with-button.tsx"],
   },
   {
     name: "textarea-with-label",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["textarea", "label"],
     files: ["example/textarea-with-label.tsx"],
   },
   {
     name: "textarea-with-text",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["textarea", "label"],
     files: ["example/textarea-with-text.tsx"],
   },
   {
     name: "toast-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toast"],
     files: ["example/toast-demo.tsx"],
   },
   {
     name: "toast-destructive",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toast"],
     files: ["example/toast-destructive.tsx"],
   },
   {
     name: "toast-simple",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toast"],
     files: ["example/toast-simple.tsx"],
   },
   {
     name: "toast-with-action",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toast"],
     files: ["example/toast-with-action.tsx"],
   },
   {
     name: "toast-with-title",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toast"],
     files: ["example/toast-with-title.tsx"],
   },
   {
     name: "toggle-group-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle-group"],
     files: ["example/toggle-group-demo.tsx"],
   },
   {
     name: "toggle-group-disabled",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle-group"],
     files: ["example/toggle-group-disabled.tsx"],
   },
   {
     name: "toggle-group-lg",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle-group"],
     files: ["example/toggle-group-lg.tsx"],
   },
   {
     name: "toggle-group-outline",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle-group"],
     files: ["example/toggle-group-outline.tsx"],
   },
   {
     name: "toggle-group-sm",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle-group"],
     files: ["example/toggle-group-sm.tsx"],
   },
   {
     name: "toggle-group-single",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle-group"],
     files: ["example/toggle-group-single.tsx"],
   },
   {
     name: "toggle-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle"],
     files: ["example/toggle-demo.tsx"],
   },
   {
     name: "toggle-disabled",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle"],
     files: ["example/toggle-disabled.tsx"],
   },
   {
     name: "toggle-lg",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle"],
     files: ["example/toggle-lg.tsx"],
   },
   {
     name: "toggle-outline",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle"],
     files: ["example/toggle-outline.tsx"],
   },
   {
     name: "toggle-sm",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle"],
     files: ["example/toggle-sm.tsx"],
   },
   {
     name: "toggle-with-text",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["toggle"],
     files: ["example/toggle-with-text.tsx"],
   },
   {
     name: "tooltip-demo",
-    type: "components:example",
+    type: "registry:example",
     registryDependencies: ["tooltip"],
     files: ["example/tooltip-demo.tsx"],
   },
   {
     name: "typography-blockquote",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-blockquote.tsx"],
   },
   {
     name: "typography-demo",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-demo.tsx"],
   },
   {
     name: "typography-h1",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-h1.tsx"],
   },
   {
     name: "typography-h2",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-h2.tsx"],
   },
   {
     name: "typography-h3",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-h3.tsx"],
   },
   {
     name: "typography-h4",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-h4.tsx"],
   },
   {
     name: "typography-inline-code",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-inline-code.tsx"],
   },
   {
     name: "typography-large",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-large.tsx"],
   },
   {
     name: "typography-lead",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-lead.tsx"],
   },
   {
     name: "typography-list",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-list.tsx"],
   },
   {
     name: "typography-muted",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-muted.tsx"],
   },
   {
     name: "typography-p",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-p.tsx"],
   },
   {
     name: "typography-small",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-small.tsx"],
   },
   {
     name: "typography-table",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/typography-table.tsx"],
   },
   {
     name: "mode-toggle",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/mode-toggle.tsx"],
   },
-  {
-    name: "cards",
-    type: "components:example",
-    files: ["example/cards/cards.tsx"],
-  },
   {
     name: "chart-bar-demo",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/chart-bar-demo.tsx"],
   },
   {
     name: "chart-bar-demo-grid",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/chart-bar-demo-grid.tsx"],
   },
   {
     name: "chart-bar-demo-axis",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/chart-bar-demo-axis.tsx"],
   },
   {
     name: "chart-bar-demo-tooltip",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/chart-bar-demo-tooltip.tsx"],
   },
   {
     name: "chart-bar-demo-legend",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/chart-bar-demo-legend.tsx"],
   },
   {
     name: "chart-tooltip-demo",
-    type: "components:example",
+    type: "registry:example",
     files: ["example/chart-tooltip-demo.tsx"],
   },
 ]
diff --git a/apps/www/registry/new-york/block/hello-block/components/hello-card.tsx b/apps/www/registry/new-york/block/hello-block/components/hello-card.tsx
new file mode 100644
index 0000000000..99c992f2c7
--- /dev/null
+++ b/apps/www/registry/new-york/block/hello-block/components/hello-card.tsx
@@ -0,0 +1,23 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+
+export function HelloCard({
+  title,
+  children,
+  className,
+}: {
+  title: string
+} & React.ComponentProps<typeof Card>) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-brand-secondary text-4xl">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  )
+}
diff --git a/apps/www/registry/new-york/block/hello-block/hello-block.tsx b/apps/www/registry/new-york/block/hello-block/hello-block.tsx
new file mode 100644
index 0000000000..521d2078ea
--- /dev/null
+++ b/apps/www/registry/new-york/block/hello-block/hello-block.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { HelloCard } from "@/registry/new-york/block/hello-block/components/hello-card"
+import { useMediaQuery } from "@/registry/new-york/hooks/use-media-query"
+import { cn } from "@/registry/new-york/lib/utils"
+import { Button } from "@/registry/new-york/ui/button"
+
+export default function HelloBlock() {
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  return (
+    <HelloCard
+      title="Hello Block"
+      className={cn(
+        "p-12",
+        isDesktop
+          ? "bg-muted text-muted-foreground"
+          : "bg-primary text-primary-foreground"
+      )}
+    >
+      <p>Hello. This is a component inside a block.</p>
+      <p>You are currently on {isDesktop ? "desktop" : "mobile"}</p>
+      <Button>Click me</Button>
+    </HelloCard>
+  )
+}
diff --git a/apps/www/registry/new-york/hooks/use-media-query.tsx b/apps/www/registry/new-york/hooks/use-media-query.ts
similarity index 100%
rename from apps/www/registry/new-york/hooks/use-media-query.tsx
rename to apps/www/registry/new-york/hooks/use-media-query.ts
diff --git a/apps/www/registry/schema.ts b/apps/www/registry/schema.ts
index bf731104a5..aeeec6cc42 100644
--- a/apps/www/registry/schema.ts
+++ b/apps/www/registry/schema.ts
@@ -14,14 +14,10 @@ export const blockChunkSchema = z.object({
 })
 
 export const registryItemTypeSchema = z.enum([
-  "components:ui",
-  "components:component",
-  "components:example",
-  "components:block",
-  "components:chart",
   "registry:style",
   "registry:lib",
-  "registry:component",
+  "registry:example",
+  "registry:block",
   "registry:ui",
   "registry:hook",
   "registry:theme",
diff --git a/apps/www/registry/ui.ts b/apps/www/registry/ui.ts
index 7dcd1ec8b5..f471ad717c 100644
--- a/apps/www/registry/ui.ts
+++ b/apps/www/registry/ui.ts
@@ -3,123 +3,123 @@ import { Registry } from "@/registry/schema"
 export const ui: Registry = [
   {
     name: "accordion",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-accordion"],
     files: ["ui/accordion.tsx"],
   },
   {
     name: "alert",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/alert.tsx"],
   },
   {
     name: "alert-dialog",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-alert-dialog"],
     registryDependencies: ["button"],
     files: ["ui/alert-dialog.tsx"],
   },
   {
     name: "aspect-ratio",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-aspect-ratio"],
     files: ["ui/aspect-ratio.tsx"],
   },
   {
     name: "avatar",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-avatar"],
     files: ["ui/avatar.tsx"],
   },
   {
     name: "badge",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/badge.tsx"],
   },
   {
     name: "breadcrumb",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-slot"],
     files: ["ui/breadcrumb.tsx"],
   },
   {
     name: "button",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-slot"],
     files: ["ui/button.tsx"],
   },
   {
     name: "calendar",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["react-day-picker@8.10.1", "date-fns"],
     registryDependencies: ["button"],
     files: ["ui/calendar.tsx"],
   },
   {
     name: "card",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/card.tsx"],
   },
   {
     name: "carousel",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/carousel.tsx"],
     registryDependencies: ["button"],
     dependencies: ["embla-carousel-react"],
   },
   {
     name: "chart",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/chart.tsx"],
     registryDependencies: ["card"],
     dependencies: ["recharts", "lucide-react"],
   },
   {
     name: "checkbox",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-checkbox"],
     files: ["ui/checkbox.tsx"],
   },
   {
     name: "collapsible",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-collapsible"],
     files: ["ui/collapsible.tsx"],
   },
   {
     name: "command",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["cmdk@1.0.0"],
     registryDependencies: ["dialog"],
     files: ["ui/command.tsx"],
   },
   {
     name: "context-menu",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-context-menu"],
     files: ["ui/context-menu.tsx"],
   },
   {
     name: "dialog",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-dialog"],
     files: ["ui/dialog.tsx"],
   },
   {
     name: "drawer",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["vaul", "@radix-ui/react-dialog"],
     files: ["ui/drawer.tsx"],
   },
   {
     name: "dropdown-menu",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-dropdown-menu"],
     files: ["ui/dropdown-menu.tsx"],
   },
   {
     name: "form",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: [
       "@radix-ui/react-label",
       "@radix-ui/react-slot",
@@ -132,154 +132,154 @@ export const ui: Registry = [
   },
   {
     name: "hover-card",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-hover-card"],
     files: ["ui/hover-card.tsx"],
   },
   {
     name: "input",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/input.tsx"],
   },
   {
     name: "input-otp",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["input-otp"],
     files: ["ui/input-otp.tsx"],
   },
   {
     name: "label",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-label"],
     files: ["ui/label.tsx"],
   },
   {
     name: "menubar",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-menubar"],
     files: ["ui/menubar.tsx"],
   },
   {
     name: "navigation-menu",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-navigation-menu"],
     files: ["ui/navigation-menu.tsx"],
   },
   {
     name: "pagination",
-    type: "components:ui",
+    type: "registry:ui",
     registryDependencies: ["button"],
     files: ["ui/pagination.tsx"],
   },
   {
     name: "popover",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-popover"],
     files: ["ui/popover.tsx"],
   },
   {
     name: "progress",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-progress"],
     files: ["ui/progress.tsx"],
   },
   {
     name: "radio-group",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-radio-group"],
     files: ["ui/radio-group.tsx"],
   },
   {
     name: "resizable",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["react-resizable-panels"],
     files: ["ui/resizable.tsx"],
   },
   {
     name: "scroll-area",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-scroll-area"],
     files: ["ui/scroll-area.tsx"],
   },
   {
     name: "select",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-select"],
     files: ["ui/select.tsx"],
   },
   {
     name: "separator",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-separator"],
     files: ["ui/separator.tsx"],
   },
   {
     name: "sheet",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-dialog"],
     files: ["ui/sheet.tsx"],
   },
   {
     name: "skeleton",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/skeleton.tsx"],
   },
   {
     name: "slider",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-slider"],
     files: ["ui/slider.tsx"],
   },
   {
     name: "sonner",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["sonner", "next-themes"],
     files: ["ui/sonner.tsx"],
   },
   {
     name: "switch",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-switch"],
     files: ["ui/switch.tsx"],
   },
   {
     name: "table",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/table.tsx"],
   },
   {
     name: "tabs",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-tabs"],
     files: ["ui/tabs.tsx"],
   },
   {
     name: "textarea",
-    type: "components:ui",
+    type: "registry:ui",
     files: ["ui/textarea.tsx"],
   },
   {
     name: "toast",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-toast"],
     files: ["ui/toast.tsx", "ui/use-toast.ts", "ui/toaster.tsx"],
   },
   {
     name: "toggle",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-toggle"],
     files: ["ui/toggle.tsx"],
   },
   {
     name: "toggle-group",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-toggle-group"],
     registryDependencies: ["toggle"],
     files: ["ui/toggle-group.tsx"],
   },
   {
     name: "tooltip",
-    type: "components:ui",
+    type: "registry:ui",
     dependencies: ["@radix-ui/react-tooltip"],
     files: ["ui/tooltip.tsx"],
   },
diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
index f727c9c96f..b8d58a31d0 100644
--- a/apps/www/scripts/build-registry.mts
+++ b/apps/www/scripts/build-registry.mts
@@ -6,21 +6,26 @@ import { cwd } from "process"
 import template from "lodash.template"
 import { rimraf } from "rimraf"
 import { Project, ScriptKind, SyntaxKind } from "ts-morph"
+import { z } from "zod"
 
 import { colorMapping, colors } from "../registry/colors"
 import { registry } from "../registry/registry"
-import { Registry, RegistryEntry, registrySchema } from "../registry/schema"
+import {
+  Registry,
+  RegistryEntry,
+  registryItemTypeSchema,
+  registrySchema,
+} from "../registry/schema"
 import { styles } from "../registry/styles"
 import { themes } from "../registry/themes"
 
 const REGISTRY_PATH = path.join(process.cwd(), "public/registry")
 
-const REGISTRY_INDEX_WHITELIST = [
-  "components:ui",
-  "components:block",
+const REGISTRY_INDEX_WHITELIST: z.infer<typeof registryItemTypeSchema>[] = [
+  "registry:block",
   "registry:lib",
   "registry:ui",
-  "registry:hooks",
+  "registry:hook",
 ]
 
 // ----------------------------------------------------------------------------
@@ -50,7 +55,10 @@ export const Index: Record<string, any> = {
     // Build style index.
     for (const item of registry) {
       const resolveFiles = item.files?.map(
-        (file) => `registry/${style.name}/${file}`
+        (file) =>
+          `registry/${style.name}/${
+            typeof file === "string" ? file : file.path
+          }`
       )
       if (!resolveFiles) {
         continue
@@ -60,10 +68,7 @@ export const Index: Record<string, any> = {
       let sourceFilename = ""
 
       let chunks: any = []
-      if (
-        item.type === "components:block" ||
-        item.type === "components:chart"
-      ) {
+      if (item.type === "registry:block") {
         const file = resolveFiles[0]
         const filename = path.basename(file)
         const raw = await fs.readFile(file, "utf8")
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 8f757714f6..d60ddd52dc 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -20,7 +20,7 @@ import {
   registryResolveItemsTree,
 } from "@/src/utils/registry"
 import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
-import { updateDestinations } from "@/src/utils/updaters/update-destinations"
+import { updateFiles } from "@/src/utils/updaters/update-files"
 import { updateTailwindConfig } from "@/src/utils/updaters/update-tailwind-config"
 import { updateTailwindCss } from "@/src/utils/updaters/update-tailwind-css"
 import { Command } from "commander"
@@ -214,6 +214,9 @@ export async function promptForConfig(defaultConfig: Config | null = null) {
     aliases: {
       utils: options.utils,
       components: options.components,
+      // TODO: fix this.
+      lib: options.components.replace(/\/components$/, "lib"),
+      hooks: options.components.replace(/\/components$/, "hooks"),
     },
   })
 }
@@ -285,8 +288,6 @@ export async function promptForMinimalConfig(
 }
 
 export async function runInit(config: Config) {
-  await updateDestinations(config)
-
   const initializersSpinner = ora(`Initializing project.`)?.start()
   const tree = await registryResolveItemsTree(["index"], config)
 
@@ -301,7 +302,13 @@ export async function runInit(config: Config) {
   initializersSpinner?.succeed()
 
   const dependenciesSpinner = ora(`Installing dependencies.`)?.start()
-  // await updateRegistryDependencies(tree.registryDependencies, config)
   await updateDependencies(tree.dependencies, config)
   dependenciesSpinner?.succeed()
+
+  const filesSpinner = ora(`Writing files.`)?.start()
+  await updateFiles(tree.files, config, {
+    // Init will always overwrite files.
+    overwrite: true,
+  })
+  filesSpinner?.succeed()
 }
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index 6bfe3a387c..04c8a5ee15 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -34,6 +34,8 @@ export const rawConfigSchema = z
       components: z.string(),
       utils: z.string(),
       ui: z.string().optional(),
+      lib: z.string().optional(),
+      hooks: z.string().optional(),
     }),
   })
   .strict()
@@ -47,6 +49,8 @@ export const configSchema = rawConfigSchema.extend({
     tailwindCss: z.string(),
     utils: z.string(),
     components: z.string(),
+    lib: z.string(),
+    hooks: z.string(),
     ui: z.string(),
   }),
 })
@@ -85,7 +89,27 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
       components: await resolveImport(config.aliases["components"], tsConfig),
       ui: config.aliases["ui"]
         ? await resolveImport(config.aliases["ui"], tsConfig)
-        : await resolveImport(config.aliases["components"], tsConfig),
+        : path.resolve(
+            (await resolveImport(config.aliases["components"], tsConfig)) ??
+              cwd,
+            "ui"
+          ),
+      // TODO: Make this configurable.
+      // For now, we assume the lib and hooks directories are one level up from the components directory.
+      lib: config.aliases["lib"]
+        ? await resolveImport(config.aliases["lib"], tsConfig)
+        : path.resolve(
+            (await resolveImport(config.aliases["utils"], tsConfig)) ?? cwd,
+            ".."
+          ),
+      hooks: config.aliases["hooks"]
+        ? await resolveImport(config.aliases["hooks"], tsConfig)
+        : path.resolve(
+            (await resolveImport(config.aliases["components"], tsConfig)) ??
+              cwd,
+            "..",
+            "hooks"
+          ),
     },
   })
 }
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index dde4a8f989..0e21555b7c 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -224,6 +224,8 @@ export async function getProjectConfig(cwd: string): Promise<Config | null> {
     aliases: {
       utils: `${projectInfo.aliasPrefix}/lib/utils`,
       components: `${projectInfo.aliasPrefix}/components`,
+      lib: `${projectInfo.aliasPrefix}/lib`,
+      hooks: `${projectInfo.aliasPrefix}/hooks`,
     },
   }
 
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index 318e7c9253..3ec1067ec5 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -7,7 +7,6 @@ import {
   registryIndexSchema,
   registryItemFileSchema,
   registryItemSchema,
-  registryItemTypeSchema,
   registryResolvedItemsTreeSchema,
   stylesSchema,
 } from "@/src/utils/registry/schema"
@@ -145,7 +144,7 @@ export async function getItemTargetPath(
     return override
   }
 
-  if (item.type === "components:ui" && config.aliases.ui) {
+  if (item.type === "registry:ui" && config.aliases.ui) {
     return config.resolvedPaths.ui
   }
 
@@ -190,7 +189,7 @@ async function fetchRegistry(paths: string[]) {
   }
 }
 
-export async function getRegistryItemFileTargetPath(
+export function getRegistryItemFileTargetPath(
   file: z.infer<typeof registryItemFileSchema>,
   config: Config,
   override?: string
@@ -204,14 +203,18 @@ export async function getRegistryItemFileTargetPath(
   }
 
   if (file.type === "registry:lib") {
-    return config.resolvedPaths.utils
+    return config.resolvedPaths.lib
   }
 
-  if (file.type === "registry:component") {
+  if (file.type === "registry:block") {
     return config.resolvedPaths.components
   }
 
-  return null
+  if (file.type === "registry:hook") {
+    return config.resolvedPaths.hooks
+  }
+
+  return config.resolvedPaths.components
 }
 
 export async function registryResolveItemsTree(
diff --git a/packages/cli/src/utils/registry/schema.ts b/packages/cli/src/utils/registry/schema.ts
index 7411501054..cc621a8720 100644
--- a/packages/cli/src/utils/registry/schema.ts
+++ b/packages/cli/src/utils/registry/schema.ts
@@ -2,14 +2,10 @@ import { z } from "zod"
 
 // TODO: Extract this to a shared package.
 export const registryItemTypeSchema = z.enum([
-  "components:ui",
-  "components:component",
-  "components:example",
-  "components:block",
-  "components:chart",
   "registry:style",
   "registry:lib",
-  "registry:component",
+  "registry:example",
+  "registry:block",
   "registry:ui",
   "registry:hook",
   "registry:theme",
diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts
index 0b912001ea..238e75482a 100644
--- a/packages/cli/src/utils/transformers/transform-import.ts
+++ b/packages/cli/src/utils/transformers/transform-import.ts
@@ -8,18 +8,45 @@ export const transformImport: Transformer = async ({ sourceFile, config }) => {
 
     // Replace @/registry/[style] with the components alias.
     if (moduleSpecifier.startsWith("@/registry/")) {
-      if (config.aliases.ui) {
-        importDeclaration.setModuleSpecifier(
-          moduleSpecifier.replace(/^@\/registry\/[^/]+\/ui/, config.aliases.ui)
-        )
-      } else {
+      if (moduleSpecifier.match(/^@\/registry\/(.+)\/ui/)) {
         importDeclaration.setModuleSpecifier(
           moduleSpecifier.replace(
-            /^@\/registry\/[^/]+/,
+            /^@\/registry\/(.+)\/ui/,
+            config.aliases.ui ?? `${config.aliases.components}/ui`
+          )
+        )
+      } else if (
+        config.aliases.components &&
+        moduleSpecifier.match(/^@\/registry\/(.+)\/components/)
+      ) {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(
+            /^@\/registry\/(.+)\/components/,
             config.aliases.components
           )
         )
       }
+
+      if (
+        config.aliases.lib &&
+        moduleSpecifier.match(/^@\/registry\/(.+)\/lib/)
+      ) {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(/^@\/registry\/(.+)\/lib/, config.aliases.lib)
+        )
+      }
+
+      if (
+        config.aliases.hooks &&
+        moduleSpecifier.match(/^@\/registry\/(.+)\/hooks/)
+      ) {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(
+            /^@\/registry\/(.+)\/hooks/,
+            config.aliases.hooks
+          )
+        )
+      }
     }
 
     // Replace `import { cn } from "@/lib/utils"`
diff --git a/packages/cli/src/utils/updaters/update-destinations.ts b/packages/cli/src/utils/updaters/update-destinations.ts
deleted file mode 100644
index fa8c41089d..0000000000
--- a/packages/cli/src/utils/updaters/update-destinations.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { existsSync, promises as fs } from "fs"
-import path from "path"
-import { Config } from "@/src/utils/get-config"
-
-export async function updateDestinations(config: Config) {
-  // Ensure all resolved paths directories exist.
-  for (const [key, resolvedPath] of Object.entries(config.resolvedPaths)) {
-    // Determine if the path is a file or directory.
-    // TODO: is there a better way to do this?
-    let dirname = path.extname(resolvedPath)
-      ? path.dirname(resolvedPath)
-      : resolvedPath
-
-    // If the utils alias is set to something like "@/lib/utils",
-    // assume this is a file and remove the "utils" file name.
-    // TODO: In future releases we should add support for individual utils.
-    if (key === "utils" && resolvedPath.endsWith("/utils")) {
-      // Remove /utils at the end.
-      dirname = dirname.replace(/\/utils$/, "")
-    }
-
-    if (!existsSync(dirname)) {
-      await fs.mkdir(dirname, { recursive: true })
-    }
-  }
-}
diff --git a/packages/cli/src/utils/updaters/update-files.ts b/packages/cli/src/utils/updaters/update-files.ts
new file mode 100644
index 0000000000..c34f213dec
--- /dev/null
+++ b/packages/cli/src/utils/updaters/update-files.ts
@@ -0,0 +1,75 @@
+import { existsSync, promises as fs } from "fs"
+import path, { basename } from "path"
+import { Config } from "@/src/utils/get-config"
+import {
+  getRegistryBaseColor,
+  getRegistryItemFileTargetPath,
+} from "@/src/utils/registry"
+import { RegistryItem } from "@/src/utils/registry/schema"
+import { transform } from "@/src/utils/transformers"
+import { transformCssVars } from "@/src/utils/transformers/transform-css-vars"
+import { transformImport } from "@/src/utils/transformers/transform-import"
+import { transformRsc } from "@/src/utils/transformers/transform-rsc"
+import { transformTwPrefixes } from "@/src/utils/transformers/transform-tw-prefix"
+
+export async function updateFiles(
+  files: RegistryItem["files"],
+  config: Config,
+  options: {
+    overwrite?: boolean
+    force?: boolean
+  }
+) {
+  if (!files?.length) {
+    return
+  }
+  options = {
+    overwrite: false,
+    force: false,
+    ...options,
+  }
+  const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
+
+  for (const file of files) {
+    // Do nothing if the file is empty.
+    if (!file.content) {
+      continue
+    }
+
+    const targetDir = getRegistryItemFileTargetPath(file, config)
+
+    // Create the target directory if it doesn't exist.
+    if (!existsSync(targetDir)) {
+      await fs.mkdir(targetDir, { recursive: true })
+    }
+
+    const fileName = basename(file.path)
+    let filePath = path.join(targetDir, fileName)
+
+    // Do nothing if the file already exists and we're not overwriting.
+    const existingFile = existsSync(filePath)
+    if (existingFile && !options.overwrite) {
+      continue
+    }
+
+    // Run our transformers.
+    const content = await transform(
+      {
+        filename: file.path,
+        raw: file.content,
+        config,
+        baseColor,
+        transformJsx: !config.tsx,
+      },
+      [transformImport, transformRsc, transformCssVars, transformTwPrefixes]
+    )
+
+    if (!config.tsx) {
+      filePath = filePath.replace(/\.tsx?$/, (match) =>
+        match === ".tsx" ? ".jsx" : ".js"
+      )
+    }
+
+    await fs.writeFile(filePath, content, "utf-8")
+  }
+}
diff --git a/packages/cli/src/utils/updaters/update-registry-dependencies.ts b/packages/cli/src/utils/updaters/update-registry-dependencies.ts
deleted file mode 100644
index fa9d6f2048..0000000000
--- a/packages/cli/src/utils/updaters/update-registry-dependencies.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Config } from "@/src/utils/get-config"
-import { fetchTree, getRegistryIndex, resolveTree } from "@/src/utils/registry"
-import { RegistryItem } from "@/src/utils/registry/schema"
-import { z } from "zod"
-
-export async function updateRegistryDependencies(
-  registryDependencies: RegistryItem["registryDependencies"],
-  config: Config
-) {
-  if (!registryDependencies?.length) {
-    return
-  }
-
-  const registryIndex = await getRegistryIndex()
-  if (!registryIndex) {
-    return null
-  }
-
-  const tree = await resolveTree(registryIndex, registryDependencies)
-  const payload = await fetchTree(config.style, tree)
-
-  if (!payload?.length) {
-    return
-  }
-
-  await Promise.all(
-    payload.map(async (dependency) => {
-      console.log(dependency)
-      // const targetPath = await getRegistryItemFileTargetPath(file, config)
-
-      // if (!targetPath) {
-      //   return
-      // }
-
-      // console.log(targetPath)
-    })
-  )
-}
diff --git a/packages/cli/src/utils/updaters/update-tailwind-config.ts b/packages/cli/src/utils/updaters/update-tailwind-config.ts
index 59d027c173..a85ecefd49 100644
--- a/packages/cli/src/utils/updaters/update-tailwind-config.ts
+++ b/packages/cli/src/utils/updaters/update-tailwind-config.ts
@@ -79,7 +79,7 @@ export async function transformTailwindConfig(
 
   // Add Tailwind config plugins.
   tailwindConfig.plugins?.forEach((plugin) => {
-    addTailwindConfigPlugin(configObject, plugin, { quoteChar })
+    addTailwindConfigPlugin(configObject, plugin)
   })
 
   // Add Tailwind config theme.
@@ -190,20 +190,14 @@ async function addTailwindConfigTheme(
 
 function addTailwindConfigPlugin(
   configObject: ObjectLiteralExpression,
-  plugin: string,
-  {
-    quoteChar,
-  }: {
-    quoteChar: string
-  }
+  plugin: string
 ) {
   const existingPlugins = configObject.getProperty("plugins")
-  const newPlugin = `require(${quoteChar}${plugin}${quoteChar})`
 
   if (!existingPlugins) {
     configObject.addPropertyAssignment({
       name: "plugins",
-      initializer: `[${newPlugin}]`,
+      initializer: `[${plugin}]`,
     })
 
     return configObject
@@ -219,11 +213,11 @@ function addTailwindConfigPlugin(
         initializer
           .getElements()
           .map((element) => element.getText())
-          .includes(newPlugin)
+          .includes(plugin)
       ) {
         return configObject
       }
-      initializer.addElement(newPlugin)
+      initializer.addElement(plugin)
     }
 
     return configObject