diff --git a/apps/www/actions/edit-in-v0.ts b/apps/www/actions/edit-in-v0.ts
index d7052d46407..4c2f718f5d7 100644
--- a/apps/www/actions/edit-in-v0.ts
+++ b/apps/www/actions/edit-in-v0.ts
@@ -1,34 +1,59 @@
 "use server"
 
 import { track } from "@vercel/analytics/server"
-
-const EDIT_IN_V0_SOURCE = "ui.shadcn.com"
+import { capitalCase } from "change-case"
 
 export async function editInV0({
   name,
+  title,
   description,
   style,
   code,
+  url,
 }: {
   name: string
+  title?: string
   description: string
   style: string
   code: string
+  url: string
 }) {
   try {
+    title =
+      title ??
+      capitalCase(
+        name.replace(/\d+/g, "").replace("-demo", "").replace("-", " ")
+      )
+
     await track("edit_in_v0", {
       name,
+      title,
       description,
       style,
+      url,
     })
 
     // Replace "use client" in the code.
     // v0 will handle this for us.
-    code = code.replace(`"use client"`, "")
+    // code = code.replace(`"use client"`, "")
+
+    const payload = {
+      title,
+      description,
+      code,
+      source: {
+        title: "shadcn/ui",
+        url,
+      },
+      meta: {
+        project: capitalCase(name.replace(/\d+/g, "")),
+        file: `${name}.tsx`,
+      },
+    }
 
-    const response = await fetch(`${process.env.V0_URL}/api/edit`, {
+    const response = await fetch(`${process.env.V0_URL}/chat/api/open-in-v0`, {
       method: "POST",
-      body: JSON.stringify({ description, code, source: EDIT_IN_V0_SOURCE }),
+      body: JSON.stringify(payload),
       headers: {
         "x-v0-edit-secret": process.env.V0_EDIT_SECRET!,
         "x-vercel-protection-bypass":
@@ -42,6 +67,8 @@ export async function editInV0({
         throw new Error("Unauthorized")
       }
 
+      console.error(response.statusText)
+
       throw new Error("Something went wrong. Please try again later.")
     }
 
@@ -49,9 +76,10 @@ export async function editInV0({
 
     return {
       ...result,
-      url: `${process.env.V0_URL}/edit/${result.id}`,
+      url: `${process.env.V0_URL}/chat/api/open-in-v0/${result.id}`,
     }
   } catch (error) {
+    console.error(error)
     if (error instanceof Error) {
       return { error: error.message }
     }
diff --git a/apps/www/app/(app)/examples/playground/components/model-selector.tsx b/apps/www/app/(app)/examples/playground/components/model-selector.tsx
index d1151d14489..fb669827d07 100644
--- a/apps/www/app/(app)/examples/playground/components/model-selector.tsx
+++ b/apps/www/app/(app)/examples/playground/components/model-selector.tsx
@@ -141,11 +141,10 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
         mutation.attributeName === "aria-selected" &&
         ref.current?.getAttribute("aria-selected") === "true"
       ) {
-        onPeek(model);
+        onPeek(model)
       }
-    });
-  });
-  
+    })
+  })
 
   return (
     <CommandItem
diff --git a/apps/www/components/v0-button.tsx b/apps/www/components/v0-button.tsx
index 23f8ce3c757..495c75f1615 100644
--- a/apps/www/components/v0-button.tsx
+++ b/apps/www/components/v0-button.tsx
@@ -40,7 +40,7 @@ function V0Tooltip({
         {style === "new-york" ? (
           <>Not available in New York</>
         ) : (
-          <>Edit in v0</>
+          <>Open in v0</>
         )}
       </TooltipContent>
     </Tooltip>
@@ -57,11 +57,17 @@ export function V0Button({
   block: Pick<Block, "name" | "description" | "code" | "style">
   size?: Size
 } & ButtonProps) {
+  const [url, setUrl] = React.useState("https://ui.shadcn.com")
+
+  React.useEffect(() => {
+    setUrl(window.location.href)
+  }, [])
+
   if (block.style === "new-york") {
     return (
       <V0Tooltip size={size} style={block.style}>
         <Button
-          aria-label="Edit in v0"
+          aria-label="Open in v0"
           className={cn(
             "z-50 h-[calc(theme(spacing.7)_-_1px)] gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",
             size === "icon" && "h-7 w-7 p-0",
@@ -86,7 +92,7 @@ export function V0Button({
             <V0Logo className="h-4 w-4" />
           ) : (
             <>
-              Edit in <V0Logo />
+              Open in <V0Logo />
             </>
           )}
         </Button>
@@ -102,6 +108,7 @@ export function V0Button({
             description: block.description || "",
             code: block.code,
             style: block.style,
+            url,
           })
 
           if (result?.error) {
@@ -141,7 +148,7 @@ function Form({
   return (
     <V0Tooltip size={size}>
       <Button
-        aria-label="Edit in v0"
+        aria-label="Open in v0"
         className={cn(
           "z-50 h-[calc(theme(spacing.7)_-_1px)] gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",
           size === "icon" && "h-7 w-7 p-0",
@@ -161,7 +168,7 @@ function Form({
         ) : (
           <>
             {pending && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
-            Edit in <V0Logo />
+            Open in <V0Logo />
           </>
         )}
       </Button>
diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx
index 4b2afd4fa13..5c1f2bd8681 100644
--- a/apps/www/content/docs/components/accordion.mdx
+++ b/apps/www/content/docs/components/accordion.mdx
@@ -10,7 +10,7 @@ links:
 <ComponentPreview
   name="accordion-demo"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
-  description="An accordion with items"
+  description="An accordion with three items"
 />
 
 ## Installation
diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx
index 798b5805beb..0685f25e772 100644
--- a/apps/www/content/docs/components/alert-dialog.mdx
+++ b/apps/www/content/docs/components/alert-dialog.mdx
@@ -10,6 +10,7 @@ links:
 
 <ComponentPreview
   name="alert-dialog-demo"
+  title="An alert dialog with cancel and continue buttons."
   description="An alert dialog with cancel and continue buttons."
 />
 
diff --git a/apps/www/content/docs/components/alert.mdx b/apps/www/content/docs/components/alert.mdx
index ca10129baae..728fbc12720 100644
--- a/apps/www/content/docs/components/alert.mdx
+++ b/apps/www/content/docs/components/alert.mdx
@@ -6,6 +6,7 @@ component: true
 
 <ComponentPreview
   name="alert-demo"
+  title="An alert with an icon, title and description."
   description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
 />
 
@@ -63,6 +64,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 
 <ComponentPreview
   name="alert-demo"
+  title="An alert with an icon, title and description."
   description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
 />
 
@@ -70,5 +72,6 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 
 <ComponentPreview
   name="alert-destructive"
+  title="An alert with a destructive variant."
   description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
 />
diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx
index 53d1abb3b9a..bbb31006a2d 100644
--- a/apps/www/content/docs/components/aspect-ratio.mdx
+++ b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -7,7 +7,11 @@ links:
   api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
 ---
 
-<ComponentPreview name="aspect-ratio-demo" />
+<ComponentPreview
+  name="aspect-ratio-demo"
+  title="Aspect Ratio"
+  description="A component that displays an image with a 16:9 aspect ratio."
+/>
 
 ## Installation
 
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
index c9a60a002ab..3e4a75b9a3d 100644
--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -7,7 +7,11 @@ links:
   api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
 ---
 
-<ComponentPreview name="avatar-demo" description="An avatar with a fallback." />
+<ComponentPreview
+  name="avatar-demo"
+  title="Avatar"
+  description="An avatar with a fallback."
+/>
 
 ## Installation
 
diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx
index 063ca99cbe4..1640a356353 100644
--- a/apps/www/content/docs/components/badge.mdx
+++ b/apps/www/content/docs/components/badge.mdx
@@ -4,7 +4,11 @@ description: Displays a badge or a component that looks like a badge.
 component: true
 ---
 
-<ComponentPreview name="badge-demo" description="A badge" />
+<ComponentPreview
+  name="badge-demo"
+  title="Badge"
+  description="A default badge"
+/>
 
 ## Installation
 
@@ -64,7 +68,11 @@ import { badgeVariants } from "@/components/ui/badge"
 
 ### Default
 
-<ComponentPreview name="badge-demo" description="A badge" />
+<ComponentPreview
+  name="badge-demo"
+  title="Badge"
+  description="A default badge"
+/>
 
 ---
 
@@ -72,6 +80,7 @@ import { badgeVariants } from "@/components/ui/badge"
 
 <ComponentPreview
   name="badge-secondary"
+  title="Badge"
   description="A badge using secondary as variant."
 />
 
@@ -81,6 +90,7 @@ import { badgeVariants } from "@/components/ui/badge"
 
 <ComponentPreview
   name="badge-outline"
+  title="Badge"
   description="A badge using outline as variant."
 />
 
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index 730f4e4c0b8..a11ab895d87 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -6,7 +6,11 @@ links:
   doc: https://react-day-picker.js.org
 ---
 
-<ComponentPreview name="calendar-demo" />
+<ComponentPreview
+  name="calendar-demo"
+  title="Calendar"
+  description="A calendar showing the current date."
+/>
 
 ## About
 
diff --git a/apps/www/content/docs/components/carousel.mdx b/apps/www/content/docs/components/carousel.mdx
index 604dfad9426..8eb758f2fb8 100644
--- a/apps/www/content/docs/components/carousel.mdx
+++ b/apps/www/content/docs/components/carousel.mdx
@@ -7,7 +7,11 @@ links:
   api: https://www.embla-carousel.com/api
 ---
 
-<ComponentPreview name="carousel-demo" />
+<ComponentPreview
+  name="carousel-demo"
+  title="Carousel"
+  description="A carousel with 5 items and a previous and next button."
+/>
 
 ## About
 
@@ -82,7 +86,11 @@ import {
 
 To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
 
-<ComponentPreview name="carousel-size" />
+<ComponentPreview
+  name="carousel-size"
+  title="Carousel"
+  description="A carousel with 3 active items of equal size."
+/>
 
 ```tsx title="Example" showLineNumbers {4-6}
 // 33% of the carousel width.
@@ -120,7 +128,11 @@ You can always adjust this in your own project if you need to.
 
 </Callout>
 
-<ComponentPreview name="carousel-spacing" />
+<ComponentPreview
+  name="carousel-spacing"
+  title="Carousel"
+  description="A carousel with 3 items with a spacing of 1rem."
+/>
 
 ```tsx title="Example" showLineNumbers /-ml-4/ /pl-4/
 <Carousel>
@@ -146,7 +158,11 @@ You can always adjust this in your own project if you need to.
 
 Use the `orientation` prop to set the orientation of the carousel.
 
-<ComponentPreview name="carousel-orientation" />
+<ComponentPreview
+  name="carousel-orientation"
+  title="Carousel"
+  description="A vertical carousel."
+/>
 
 ```tsx showLineNumbers /vertical | horizontal/
 <Carousel orientation="vertical | horizontal">
@@ -181,7 +197,11 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
 
 Use a state and the `setApi` props to get an instance of the carousel API.
 
-<ComponentPreview name="carousel-api" />
+<ComponentPreview
+  name="carousel-api"
+  title="Carousel"
+  description="A carousel with a slide counter."
+/>
 
 ```tsx showLineNumbers {1,4,22}
 import { type CarouselApi } from "@/components/ui/carousel"
@@ -272,6 +292,10 @@ export function Example() {
 }
 ```
 
-<ComponentPreview name="carousel-plugin" />
+<ComponentPreview
+  name="carousel-plugin"
+  title="Carousel"
+  description="A carousel with the autoplay plugin."
+/>
 
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
diff --git a/apps/www/content/docs/components/combobox.mdx b/apps/www/content/docs/components/combobox.mdx
index 2e1efc92fea..167ff77f3a7 100644
--- a/apps/www/content/docs/components/combobox.mdx
+++ b/apps/www/content/docs/components/combobox.mdx
@@ -4,7 +4,10 @@ description: Autocomplete input and command palette with a list of suggestions.
 component: true
 ---
 
-<ComponentPreview name="combobox-demo" />
+<ComponentPreview
+  name="combobox-demo"
+  description="A combobox with a list of frameworks."
+/>
 
 ## Installation
 
@@ -115,7 +118,10 @@ export function ComboboxDemo() {
 
 ### Combobox
 
-<ComponentPreview name="combobox-demo" />
+<ComponentPreview
+  name="combobox-demo"
+  description="A combobox with a list of frameworks."
+/>
 
 ### Popover
 
@@ -123,7 +129,10 @@ export function ComboboxDemo() {
 
 ### Dropdown menu
 
-<ComponentPreview name="combobox-dropdown-menu" />
+<ComponentPreview
+  name="combobox-dropdown-menu"
+  description="A combobox in a dropdown menu"
+/>
 
 ### Responsive
 
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index 3ff116d36d9..007e0a170dd 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -95,7 +95,10 @@ import {
 
 ### Dialog
 
-<ComponentPreview name="command-dialog" />
+<ComponentPreview
+  name="command-dialog"
+  description="A command menu in a dialog"
+/>
 
 To show the command menu in a dialog, use the `<CommandDialog />` component.
 
diff --git a/apps/www/content/docs/components/date-picker.mdx b/apps/www/content/docs/components/date-picker.mdx
index 040dbf89591..3e92b5baa56 100644
--- a/apps/www/content/docs/components/date-picker.mdx
+++ b/apps/www/content/docs/components/date-picker.mdx
@@ -4,7 +4,10 @@ description: A date picker component with range and presets.
 component: true
 ---
 
-<ComponentPreview name="date-picker-demo" />
+<ComponentPreview
+  name="date-picker-demo"
+  description="A date picker in a popover"
+/>
 
 ## Installation
 
@@ -66,15 +69,24 @@ See the [React DayPicker](https://react-day-picker.js.org) documentation for mor
 
 ### Date Picker
 
-<ComponentPreview name="date-picker-demo" />
+<ComponentPreview
+  name="date-picker-demo"
+  description="A date picker in a popover"
+/>
 
 ### Date Range Picker
 
-<ComponentPreview name="date-picker-with-range" />
+<ComponentPreview
+  name="date-picker-with-range"
+  description="A date range picker"
+/>
 
 ### With Presets
 
-<ComponentPreview name="date-picker-with-presets" />
+<ComponentPreview
+  name="date-picker-with-presets"
+  description="A date picker with presets"
+/>
 
 ### Form
 
diff --git a/apps/www/content/docs/components/drawer.mdx b/apps/www/content/docs/components/drawer.mdx
index 03db3bcc3e4..c740a7ce288 100644
--- a/apps/www/content/docs/components/drawer.mdx
+++ b/apps/www/content/docs/components/drawer.mdx
@@ -6,7 +6,7 @@ links:
   doc: https://github.com/emilkowalski/vaul
 ---
 
-<ComponentPreview name="drawer-demo" />
+<ComponentPreview name="drawer-demo" description="A drawer component." />
 
 ## About
 
diff --git a/apps/www/content/docs/components/menubar.mdx b/apps/www/content/docs/components/menubar.mdx
index 2e6adec627b..796bf44a438 100644
--- a/apps/www/content/docs/components/menubar.mdx
+++ b/apps/www/content/docs/components/menubar.mdx
@@ -7,7 +7,7 @@ links:
   api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
 ---
 
-<ComponentPreview name="menubar-demo" />
+<ComponentPreview name="menubar-demo" description="A menubar component." />
 
 ## Installation
 
diff --git a/apps/www/content/docs/components/progress.mdx b/apps/www/content/docs/components/progress.mdx
index 2dd0b4eb9e9..6b6e30e5c50 100644
--- a/apps/www/content/docs/components/progress.mdx
+++ b/apps/www/content/docs/components/progress.mdx
@@ -7,7 +7,10 @@ links:
   api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
 ---
 
-<ComponentPreview name="progress-demo" />
+<ComponentPreview
+  name="progress-demo"
+  description="A progress bar component."
+/>
 
 ## Installation
 
diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx
index cf42aa96413..1f20d6fec8c 100644
--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -7,7 +7,10 @@ links:
   api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
 ---
 
-<ComponentPreview name="scroll-area-demo" />
+<ComponentPreview
+  name="scroll-area-demo"
+  description="A scroll area component."
+/>
 
 ## Installation
 
diff --git a/apps/www/content/docs/components/table.mdx b/apps/www/content/docs/components/table.mdx
index 64b3f0e0edf..cd943406fba 100644
--- a/apps/www/content/docs/components/table.mdx
+++ b/apps/www/content/docs/components/table.mdx
@@ -4,7 +4,7 @@ description: A responsive table component.
 component: true
 ---
 
-<ComponentPreview name="table-demo" />
+<ComponentPreview name="table-demo" description="A table component." />
 
 ## Installation
 
diff --git a/apps/www/package.json b/apps/www/package.json
index c8e385174b2..c0ea74acc98 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev -p 3003",
+    "dev": "next dev -p 3333",
     "build": "contentlayer2 build && pnpm build:registry && next build",
     "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --loglevel silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
     "build:docs": "contentlayer2 build",
@@ -53,6 +53,7 @@
     "@tanstack/react-table": "^8.9.1",
     "@vercel/analytics": "^1.2.2",
     "@vercel/og": "^0.0.21",
+    "change-case": "^5.4.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
diff --git a/apps/www/registry/default/example/aspect-ratio-demo.tsx b/apps/www/registry/default/example/aspect-ratio-demo.tsx
index 174a4860992..c7ccdeeae5f 100644
--- a/apps/www/registry/default/example/aspect-ratio-demo.tsx
+++ b/apps/www/registry/default/example/aspect-ratio-demo.tsx
@@ -9,7 +9,7 @@ export default function AspectRatioDemo() {
         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"
+        className="h-full w-full rounded-md object-cover"
       />
     </AspectRatio>
   )
diff --git a/apps/www/registry/default/example/carousel-api.tsx b/apps/www/registry/default/example/carousel-api.tsx
index d53123b7369..c38eee0fc66 100644
--- a/apps/www/registry/default/example/carousel-api.tsx
+++ b/apps/www/registry/default/example/carousel-api.tsx
@@ -29,7 +29,7 @@ export default function CarouselDApiDemo() {
   }, [api])
 
   return (
-    <div>
+    <div className="mx-auto max-w-xs">
       <Carousel setApi={setApi} className="w-full max-w-xs">
         <CarouselContent>
           {Array.from({ length: 5 }).map((_, index) => (
diff --git a/apps/www/registry/default/example/command-demo.tsx b/apps/www/registry/default/example/command-demo.tsx
index 0071ebabc0b..8b8b50c86b1 100644
--- a/apps/www/registry/default/example/command-demo.tsx
+++ b/apps/www/registry/default/example/command-demo.tsx
@@ -20,7 +20,7 @@ import {
 
 export default function CommandDemo() {
   return (
-    <Command className="rounded-lg border shadow-md">
+    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
diff --git a/apps/www/registry/default/example/resizable-demo-with-handle.tsx b/apps/www/registry/default/example/resizable-demo-with-handle.tsx
index af9c5973d3f..e58052a66c5 100644
--- a/apps/www/registry/default/example/resizable-demo-with-handle.tsx
+++ b/apps/www/registry/default/example/resizable-demo-with-handle.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="max-w-md rounded-lg border"
+      className="max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={50}>
         <div className="flex h-[200px] items-center justify-center p-6">
diff --git a/apps/www/registry/default/example/resizable-demo.tsx b/apps/www/registry/default/example/resizable-demo.tsx
index 8429c3d4d86..48a4784765e 100644
--- a/apps/www/registry/default/example/resizable-demo.tsx
+++ b/apps/www/registry/default/example/resizable-demo.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="max-w-md rounded-lg border"
+      className="max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={50}>
         <div className="flex h-[200px] items-center justify-center p-6">
diff --git a/apps/www/registry/default/example/resizable-handle.tsx b/apps/www/registry/default/example/resizable-handle.tsx
index eeba94f6c53..1c53d1b05ce 100644
--- a/apps/www/registry/default/example/resizable-handle.tsx
+++ b/apps/www/registry/default/example/resizable-handle.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="min-h-[200px] max-w-md rounded-lg border"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
diff --git a/apps/www/registry/default/example/resizable-vertical.tsx b/apps/www/registry/default/example/resizable-vertical.tsx
index 2e9e4c44300..8c55a2e67d7 100644
--- a/apps/www/registry/default/example/resizable-vertical.tsx
+++ b/apps/www/registry/default/example/resizable-vertical.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="vertical"
-      className="min-h-[200px] max-w-md rounded-lg border"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
diff --git a/apps/www/registry/new-york/example/aspect-ratio-demo.tsx b/apps/www/registry/new-york/example/aspect-ratio-demo.tsx
index 2a06afa35b7..3ad4a7c93ba 100644
--- a/apps/www/registry/new-york/example/aspect-ratio-demo.tsx
+++ b/apps/www/registry/new-york/example/aspect-ratio-demo.tsx
@@ -9,7 +9,7 @@ export default function AspectRatioDemo() {
         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"
+        className="h-full w-full rounded-md object-cover"
       />
     </AspectRatio>
   )
diff --git a/apps/www/registry/new-york/example/carousel-api.tsx b/apps/www/registry/new-york/example/carousel-api.tsx
index 5e4cfc073d8..993a0fc1288 100644
--- a/apps/www/registry/new-york/example/carousel-api.tsx
+++ b/apps/www/registry/new-york/example/carousel-api.tsx
@@ -29,7 +29,7 @@ export default function CarouselDApiDemo() {
   }, [api])
 
   return (
-    <div>
+    <div className="mx-auto max-w-xs">
       <Carousel setApi={setApi} className="w-full max-w-xs">
         <CarouselContent>
           {Array.from({ length: 5 }).map((_, index) => (
diff --git a/apps/www/registry/new-york/example/command-demo.tsx b/apps/www/registry/new-york/example/command-demo.tsx
index efc5d6e75a7..baec81c5006 100644
--- a/apps/www/registry/new-york/example/command-demo.tsx
+++ b/apps/www/registry/new-york/example/command-demo.tsx
@@ -20,7 +20,7 @@ import {
 
 export default function CommandDemo() {
   return (
-    <Command className="rounded-lg border shadow-md">
+    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
diff --git a/apps/www/registry/new-york/example/resizable-demo-with-handle.tsx b/apps/www/registry/new-york/example/resizable-demo-with-handle.tsx
index 855f8af3052..1d18080d129 100644
--- a/apps/www/registry/new-york/example/resizable-demo-with-handle.tsx
+++ b/apps/www/registry/new-york/example/resizable-demo-with-handle.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="max-w-md rounded-lg border"
+      className="max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={50}>
         <div className="flex h-[200px] items-center justify-center p-6">
diff --git a/apps/www/registry/new-york/example/resizable-demo.tsx b/apps/www/registry/new-york/example/resizable-demo.tsx
index d7d339a64a8..11434a6d5c0 100644
--- a/apps/www/registry/new-york/example/resizable-demo.tsx
+++ b/apps/www/registry/new-york/example/resizable-demo.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="max-w-md rounded-lg border"
+      className="max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={50}>
         <div className="flex h-[200px] items-center justify-center p-6">
diff --git a/apps/www/registry/new-york/example/resizable-handle.tsx b/apps/www/registry/new-york/example/resizable-handle.tsx
index 852f072ac47..823909de32e 100644
--- a/apps/www/registry/new-york/example/resizable-handle.tsx
+++ b/apps/www/registry/new-york/example/resizable-handle.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="horizontal"
-      className="min-h-[200px] max-w-md rounded-lg border"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
diff --git a/apps/www/registry/new-york/example/resizable-vertical.tsx b/apps/www/registry/new-york/example/resizable-vertical.tsx
index df2a8853c02..3d7023f7dc0 100644
--- a/apps/www/registry/new-york/example/resizable-vertical.tsx
+++ b/apps/www/registry/new-york/example/resizable-vertical.tsx
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
       direction="vertical"
-      className="min-h-[200px] max-w-md rounded-lg border"
+      className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
     >
       <ResizablePanel defaultSize={25}>
         <div className="flex h-full items-center justify-center p-6">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ae81089c75..b1c6b75d15a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,7 @@ importers:
         version: 7.32.2(eslint@8.44.0)
       eslint-plugin-tailwindcss:
         specifier: 3.13.1
-        version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)))
+        version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
       postcss:
         specifier: ^8.4.24
         version: 8.4.24
@@ -70,10 +70,10 @@ importers:
         version: 3.1.3(prettier@2.8.8)
       tailwindcss:
         specifier: 3.3.7
-        version: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
+        version: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
       tailwindcss-animate:
         specifier: ^1.0.5
-        version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)))
+        version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
       tsx:
         specifier: ^4.1.4
         version: 4.1.4
@@ -207,6 +207,9 @@ importers:
       '@vercel/og':
         specifier: ^0.0.21
         version: 0.0.21
+      change-case:
+        specifier: ^5.4.4
+        version: 5.4.4
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -454,7 +457,7 @@ importers:
         version: 4.1.3
       tsup:
         specifier: ^6.6.3
-        version: 6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))(typescript@4.9.5)
+        version: 6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5)
       type-fest:
         specifier: ^3.8.0
         version: 3.8.0
@@ -478,10 +481,10 @@ importers:
         version: 0.288.0(react@18.2.0)
       next:
         specifier: 14.1.3
-        version: 14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       next-themes:
         specifier: ^0.2.1
-        version: 0.2.1(next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -3130,6 +3133,9 @@ packages:
     resolution: {integrity: sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
@@ -7377,7 +7383,7 @@ snapshots:
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
+      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
       typescript: 5.5.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -9790,6 +9796,8 @@ snapshots:
 
   chalk@5.2.0: {}
 
+  change-case@5.4.4: {}
+
   character-entities-html4@2.1.0: {}
 
   character-entities-legacy@3.0.0: {}
@@ -9983,7 +9991,7 @@ snapshots:
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@5.5.3)
-      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
+      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
       typescript: 5.5.3
 
   cosmiconfig@8.1.3:
@@ -10626,11 +10634,11 @@ snapshots:
       postcss: 8.4.38
       tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
 
-  eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))):
+  eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.38
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
+      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
 
   eslint-plugin-turbo@1.9.9(eslint@8.44.0):
     dependencies:
@@ -12542,9 +12550,9 @@ snapshots:
       - markdown-wasm
       - supports-color
 
-  next-themes@0.2.1(next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-themes@0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      next: 14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
@@ -12554,7 +12562,7 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@next/env': 14.1.3
       '@swc/helpers': 0.5.2
@@ -12564,7 +12572,7 @@ snapshots:
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.22.1)(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.24.6)(react@18.2.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.1.3
       '@next/swc-darwin-x64': 14.1.3
@@ -12887,13 +12895,13 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.38
 
-  postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5)):
+  postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.11.27)(typescript@4.9.5)
+      ts-node: 10.9.2(@types/node@20.14.0)(typescript@4.9.5)
 
   postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
     dependencies:
@@ -12903,13 +12911,13 @@ snapshots:
       postcss: 8.4.38
       ts-node: 10.9.2(@types/node@17.0.45)(typescript@5.5.3)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
     dependencies:
       lilconfig: 3.1.1
       yaml: 2.4.3
     optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
+      ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
 
   postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
@@ -13755,6 +13763,13 @@ snapshots:
     optionalDependencies:
       '@babel/core': 7.22.1
 
+  styled-jsx@5.1.1(@babel/core@7.24.6)(react@18.2.0):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+    optionalDependencies:
+      '@babel/core': 7.24.6
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -13790,9 +13805,9 @@ snapshots:
     dependencies:
       tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
 
-  tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))):
+  tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
     dependencies:
-      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
+      tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
 
   tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
     dependencies:
@@ -13821,7 +13836,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)):
+  tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -13840,7 +13855,7 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.1.0
       resolve: 1.22.8
@@ -13971,7 +13986,7 @@ snapshots:
       yn: 3.1.1
     optional: true
 
-  ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5):
+  ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -13985,28 +14000,28 @@ snapshots:
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.9.5
+      typescript: 5.5.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    optional: true
 
-  ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3):
+  ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.5.1
+      '@types/node': 20.14.0
       acorn: 8.11.3
       acorn-walk: 8.3.2
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 5.5.3
+      typescript: 4.9.5
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optional: true
 
   ts-pattern@5.2.0: {}
 
@@ -14031,7 +14046,7 @@ snapshots:
 
   tslib@2.6.2: {}
 
-  tsup@6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))(typescript@4.9.5):
+  tsup@6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5):
     dependencies:
       bundle-require: 4.2.1(esbuild@0.17.19)
       cac: 6.7.14
@@ -14041,7 +14056,7 @@ snapshots:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))
+      postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))
       resolve-from: 5.0.0
       rollup: 3.29.4
       source-map: 0.8.0-beta.0