diff --git a/apps/www/src/examples/cards/components/DatePicker.vue b/apps/www/src/examples/cards/components/DatePicker.vue
index 8e82644b..e48a8f09 100644
--- a/apps/www/src/examples/cards/components/DatePicker.vue
+++ b/apps/www/src/examples/cards/components/DatePicker.vue
@@ -11,7 +11,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
         <Label for="date" class="shrink-0">
           Pick a date
         </Label>
-        <DatePickerWithRange class="[&>button]:w-[260px]" />
+        <DatePickerWithRange />
       </div>
     </CardContent>
   </Card>
diff --git a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
index c0d3cf55..09eddd51 100644
--- a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import {
-  PinInput,
-  PinInputGroup,
-  PinInputInput,
-} from '@/lib/registry/default/ui/pin-input'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -17,7 +8,16 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/default/ui/form'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/default/ui/pin-input'
 import { toast } from '@/lib/registry/default/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
@@ -48,7 +48,7 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
         <FormControl>
           <PinInput
             id="pin-input"
-            v-model="value!"
+            :model-value="value"
             placeholder="○"
             class="flex gap-2 items-center mt-1"
             otp
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
index 47fe8de5..20f5ed24 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -6,6 +6,26 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+import { valueUpdater } from '@/lib/utils'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import {
   FlexRender,
   getCoreRowModel,
@@ -16,28 +36,8 @@ import {
   useVueTable,
 } from '@tanstack/vue-table'
 import { h, ref } from 'vue'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
 import DropdownAction from './DataTableDemoColumn.vue'
 
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/lib/registry/new-york/ui/table'
-import { valueUpdater } from '@/lib/utils'
-
 export interface Payment {
   id: string
   amount: number
@@ -105,7 +105,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
index 2ac9080c..8546a60f 100644
--- a/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import {
-  PinInput,
-  PinInputGroup,
-  PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -17,7 +8,16 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/new-york/ui/form'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
@@ -48,7 +48,7 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
         <FormControl>
           <PinInput
             id="pin-input"
-            v-model="value!"
+            :model-value="value"
             placeholder="○"
             class="flex gap-2 items-center mt-1"
             otp