diff --git a/apps/www/src/lib/registry/default/example/CardChat.vue b/apps/www/src/lib/registry/default/example/CardChat.vue
index d80997ea..d1b38609 100644
--- a/apps/www/src/lib/registry/default/example/CardChat.vue
+++ b/apps/www/src/lib/registry/default/example/CardChat.vue
@@ -67,7 +67,7 @@ const selectedUsers = ref<User[]>([])
 <template>
   <Card>
     <CardHeader class="flex flex-row items-center justify-between">
-      <div class="flex items-center space-x-4">
+      <div class="flex items-center gap-4">
         <Avatar>
           <AvatarImage src="/avatars/01.png" alt="Image" />
           <AvatarFallback>OM</AvatarFallback>
@@ -114,7 +114,7 @@ const selectedUsers = ref<User[]>([])
     </CardContent>
     <CardFooter>
       <form
-        class="flex w-full items-center space-x-2"
+        class="flex w-full items-center gap-2"
         @submit.prevent="() => {
           if (inputLength === 0) return
           messages.push({
@@ -182,7 +182,7 @@ const selectedUsers = ref<User[]>([])
         </CommandList>
       </Command>
       <DialogFooter class="flex items-center border-t p-4 sm:justify-between">
-        <div v-if="selectedUsers.length > 0" class="flex -space-x-2 overflow-hidden">
+        <div v-if="selectedUsers.length > 0" class="flex -flex gap-2 overflow-hidden">
           <Avatar
             v-for="user in selectedUsers"
             :key="user.email"
diff --git a/apps/www/src/lib/registry/default/example/CardDemo.vue b/apps/www/src/lib/registry/default/example/CardDemo.vue
index 7b6b4d3a..789db8de 100644
--- a/apps/www/src/lib/registry/default/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CardDemo.vue
@@ -36,7 +36,7 @@ const notifications = [
       <CardDescription>You have 3 unread messages.</CardDescription>
     </CardHeader>
     <CardContent class="grid gap-4">
-      <div class=" flex items-center space-x-4 rounded-md border p-4">
+      <div class=" flex items-center gap-4 rounded-md border p-4">
         <BellRing />
         <div class="flex-1 space-y-1">
           <p class="text-sm font-medium leading-none">
diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
index f2445fa8..53c4f15f 100644
--- a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
@@ -49,7 +49,7 @@ const data = [
       <CardDescription>Set your daily activity goal.</CardDescription>
     </CardHeader>
     <CardContent class="pb-2">
-      <div class="flex items-center justify-center space-x-2">
+      <div class="flex items-center justify-center gap-2">
         <Button
           variant="outline"
           size="icon"
diff --git a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
index 33b3215a..9675882a 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -231,12 +231,12 @@ const table = useVueTable({
           </Table>
         </div>
 
-        <div class="flex items-center justify-end space-x-2 py-4">
+        <div class="flex items-center justify-end gap-2 py-4">
           <div class="flex-1 text-sm text-muted-foreground">
             {{ table.getFilteredSelectedRowModel().rows.length }} of
             {{ table.getFilteredRowModel().rows.length }} row(s) selected.
           </div>
-          <div class="space-x-2">
+          <div class="flex gap-2">
             <Button
               variant="outline"
               size="sm"
diff --git a/apps/www/src/lib/registry/default/example/CheckboxDemo.vue b/apps/www/src/lib/registry/default/example/CheckboxDemo.vue
index 9cdd4a41..0540bc43 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxDemo.vue
@@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <div class="flex items-center gap-2">
     <Checkbox id="terms" />
     <label
       for="terms"
diff --git a/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue b/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
index bb30177f..10500443 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
@@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 </script>
 
 <template>
-  <div class="items-top flex space-x-2">
+  <div class="items-top flex gap-2">
     <Checkbox id="terms1" disabled />
     <label
       for="terms2"
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
index 641c719b..218c8192 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
@@ -78,7 +78,7 @@ const onSubmit = handleSubmit((values) => {
         </div>
 
         <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
-          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+          <FormItem class="flex flex-row items-start gap-3 space-y-0">
             <FormControl>
               <Checkbox
                 :checked="value.includes(item.id)"
diff --git a/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
index b0980a30..f2eaab24 100644
--- a/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
@@ -17,7 +17,7 @@ const isOpen = ref(false)
     v-model:open="isOpen"
     class="w-[350px] space-y-2"
   >
-    <div class="flex items-center justify-between space-x-4 px-4">
+    <div class="flex items-center justify-between gap-4 px-4">
       <h4 class="text-sm font-semibold">
         @peduarte starred 3 repositories
       </h4>
diff --git a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
index 52fa47ee..d3f73278 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
@@ -66,7 +66,7 @@ const selectedStatus = ref<Status>()
 </script>
 
 <template>
-  <div class="flex items-center space-x-4">
+  <div class="flex items-center gap-4">
     <p class="text-sm text-muted-foreground">
       Status
     </p>
diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
index e349923d..d9d4c4a7 100644
--- a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
@@ -242,12 +242,12 @@ const table = useVueTable({
       </Table>
     </div>
 
-    <div class="flex items-center justify-end space-x-2 py-4">
+    <div class="flex items-center justify-end gap-2 py-4">
       <div class="flex-1 text-sm text-muted-foreground">
         {{ table.getFilteredSelectedRowModel().rows.length }} of
         {{ table.getFilteredRowModel().rows.length }} row(s) selected.
       </div>
-      <div class="space-x-2">
+      <div class="flex gap-2">
         <Button
           variant="outline"
           size="sm"
diff --git a/apps/www/src/lib/registry/default/example/DataTableDemo.vue b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
index df77bfd8..b9d79ca2 100644
--- a/apps/www/src/lib/registry/default/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
@@ -224,12 +224,12 @@ const table = useVueTable({
       </Table>
     </div>
 
-    <div class="flex items-center justify-end space-x-2 py-4">
+    <div class="flex items-center justify-end gap-2 py-4">
       <div class="flex-1 text-sm text-muted-foreground">
         {{ table.getFilteredSelectedRowModel().rows.length }} of
         {{ table.getFilteredRowModel().rows.length }} row(s) selected.
       </div>
-      <div class="space-x-2">
+      <div class="flex gap-2">
         <Button
           variant="outline"
           size="sm"
diff --git a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
index 7f286bba..bf5103bd 100644
--- a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
+++ b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
@@ -29,7 +29,7 @@ import { Label } from '@/lib/registry/default/ui/label'
           Anyone who has this link will be able to view this.
         </DialogDescription>
       </DialogHeader>
-      <div class="flex items-center space-x-2">
+      <div class="flex items-center gap-2">
         <div class="grid flex-1 gap-2">
           <Label for="link" class="sr-only">
             Link
diff --git a/apps/www/src/lib/registry/default/example/DrawerDemo.vue b/apps/www/src/lib/registry/default/example/DrawerDemo.vue
index aec72f27..8f6ec0e0 100644
--- a/apps/www/src/lib/registry/default/example/DrawerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DrawerDemo.vue
@@ -48,7 +48,7 @@ const data = [
           <DrawerDescription>Set your daily activity goal.</DrawerDescription>
         </DrawerHeader>
         <div class="p-4 pb-0">
-          <div class="flex items-center justify-center space-x-2">
+          <div class="flex items-center justify-center gap-2">
             <Button
               variant="outline"
               size="icon"
diff --git a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue
index d83266b7..cda04ec9 100644
--- a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue
+++ b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue
@@ -22,7 +22,7 @@ import {
       </Button>
     </HoverCardTrigger>
     <HoverCardContent class="w-80">
-      <div class="flex justify-between space-x-4">
+      <div class="flex justify-between gap-4">
         <Avatar>
           <AvatarImage src="https://github.com/vuejs.png" />
           <AvatarFallback>VC</AvatarFallback>
diff --git a/apps/www/src/lib/registry/default/example/LabelDemo.vue b/apps/www/src/lib/registry/default/example/LabelDemo.vue
index 9dfd3332..8574b4f0 100644
--- a/apps/www/src/lib/registry/default/example/LabelDemo.vue
+++ b/apps/www/src/lib/registry/default/example/LabelDemo.vue
@@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/default/ui/label'
 
 <template>
   <div>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <Checkbox id="terms" />
       <Label for="terms">Accept terms and conditions</Label>
     </div>
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue b/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
index a6da7a6f..7ff0d8e6 100644
--- a/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
+++ b/apps/www/src/lib/registry/default/example/RadioGroupDemo.vue
@@ -5,15 +5,15 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-grou
 
 <template>
   <RadioGroup default-value="comfortable">
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <RadioGroupItem id="r1" value="default" />
       <Label for="r1">Default</Label>
     </div>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <RadioGroupItem id="r2" value="comfortable" />
       <Label for="r2">Comfortable</Label>
     </div>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <RadioGroupItem id="r3" value="compact" />
       <Label for="r3">Compact</Label>
     </div>
diff --git a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
index d687c9a0..8c966deb 100644
--- a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
@@ -28,7 +28,7 @@ const works: Artwork[] = [
 
 <template>
   <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
-    <div class="flex p-4 space-x-4 w-max">
+    <div class="flex p-4 gap-4 w-max">
       <div v-for="artwork in works" :key="artwork.id">
         <figure class="shrink-0">
           <div class="overflow-hidden rounded-md">
diff --git a/apps/www/src/lib/registry/default/example/SeparatorDemo.vue b/apps/www/src/lib/registry/default/example/SeparatorDemo.vue
index ddd29560..555d7e4a 100644
--- a/apps/www/src/lib/registry/default/example/SeparatorDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SeparatorDemo.vue
@@ -13,7 +13,7 @@ import { Separator } from '@/lib/registry/default/ui/separator'
       </p>
     </div>
     <Separator class="my-4" />
-    <div class="flex h-5 items-center space-x-4 text-sm">
+    <div class="flex h-5 items-center gap-4 text-sm">
       <div>Blog</div>
       <Separator orientation="vertical" />
       <div>Docs</div>
diff --git a/apps/www/src/lib/registry/default/example/SkeletonDemo.vue b/apps/www/src/lib/registry/default/example/SkeletonDemo.vue
index 33f2beec..2428f33f 100644
--- a/apps/www/src/lib/registry/default/example/SkeletonDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SkeletonDemo.vue
@@ -3,7 +3,7 @@ import { Skeleton } from '@/lib/registry/default/ui/skeleton'
 </script>
 
 <template>
-  <div class="flex items-center space-x-4">
+  <div class="flex items-center gap-4">
     <Skeleton class="h-12 w-12 rounded-full" />
     <div class="space-y-2">
       <Skeleton class="h-4 w-[250px]" />
diff --git a/apps/www/src/lib/registry/default/example/SwitchDemo.vue b/apps/www/src/lib/registry/default/example/SwitchDemo.vue
index b97c506a..219d260e 100644
--- a/apps/www/src/lib/registry/default/example/SwitchDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SwitchDemo.vue
@@ -4,7 +4,7 @@ import { Switch } from '@/lib/registry/default/ui/switch'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <div class="flex items-center gap-2">
     <Switch id="airplane-mode" />
     <Label for="airplane-mode">Airplane Mode</Label>
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index ba4143d9..adf9f534 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { type VariantProps, cva } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--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',
+  'group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--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',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/example/CardChat.vue b/apps/www/src/lib/registry/new-york/example/CardChat.vue
index ac25c4d9..ca6d91c2 100644
--- a/apps/www/src/lib/registry/new-york/example/CardChat.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardChat.vue
@@ -67,7 +67,7 @@ const selectedUsers = ref<User[]>([])
 <template>
   <Card>
     <CardHeader class="flex flex-row items-center justify-between">
-      <div class="flex items-center space-x-4">
+      <div class="flex items-center gap-4">
         <Avatar>
           <AvatarImage src="/avatars/01.png" alt="Image" />
           <AvatarFallback>OM</AvatarFallback>
@@ -114,7 +114,7 @@ const selectedUsers = ref<User[]>([])
     </CardContent>
     <CardFooter>
       <form
-        class="flex w-full items-center space-x-2"
+        class="flex w-full items-center gap-2"
         @submit.prevent="() => {
           if (inputLength === 0) return
           messages.push({
@@ -182,7 +182,7 @@ const selectedUsers = ref<User[]>([])
         </CommandList>
       </Command>
       <DialogFooter class="flex items-center border-t p-4 sm:justify-between">
-        <div v-if="selectedUsers.length > 0" class="flex -space-x-2 overflow-hidden">
+        <div v-if="selectedUsers.length > 0" class="flex -flex gap-2 overflow-hidden">
           <Avatar
             v-for="user in selectedUsers"
             :key="user.email"
diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
index 35abf097..c43b5f94 100644
--- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
@@ -35,7 +35,7 @@ const notifications = [
       <CardDescription>You have 3 unread messages.</CardDescription>
     </CardHeader>
     <CardContent class="grid gap-4">
-      <div class=" flex items-center space-x-4 rounded-md border p-4">
+      <div class=" flex items-center gap-4 rounded-md border p-4">
         <BellIcon />
         <div class="flex-1 space-y-1">
           <p class="text-sm font-medium leading-none">
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
index 420887d9..38346c5c 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
@@ -45,7 +45,7 @@ const data = [
       <CardDescription>Set your daily activity goal.</CardDescription>
     </CardHeader>
     <CardContent class="pb-2">
-      <div class="flex items-center justify-center space-x-2">
+      <div class="flex items-center justify-center gap-2">
         <Button
           variant="outline"
           size="icon"
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
index 56a19180..dfbcfaf7 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/DataTable.vue
@@ -231,12 +231,12 @@ const table = useVueTable({
           </Table>
         </div>
 
-        <div class="flex items-center justify-end space-x-2 py-4">
+        <div class="flex items-center justify-end gap-2 py-4">
           <div class="flex-1 text-sm text-muted-foreground">
             {{ table.getFilteredSelectedRowModel().rows.length }} of
             {{ table.getFilteredRowModel().rows.length }} row(s) selected.
           </div>
-          <div class="space-x-2">
+          <div class="flex gap-2">
             <Button
               variant="outline"
               size="sm"
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue b/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
index 5f58ce16..e958624c 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxDemo.vue
@@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <div class="flex items-center gap-2">
     <Checkbox id="terms" />
     <label
       for="terms"
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue b/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue
index f754015b..8695d244 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxDisabled.vue
@@ -3,7 +3,7 @@ import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 </script>
 
 <template>
-  <div class="items-top flex space-x-2">
+  <div class="items-top flex gap-2">
     <Checkbox id="terms1" disabled />
     <label
       for="terms2"
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
index 1debb310..3913c320 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
@@ -78,7 +78,7 @@ const onSubmit = handleSubmit((values) => {
         </div>
 
         <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
-          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+          <FormItem class="flex flex-row items-start gap-3 space-y-0">
             <FormControl>
               <Checkbox
                 :checked="value.includes(item.id)"
diff --git a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
index 77868bbf..f5977d16 100644
--- a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
@@ -17,7 +17,7 @@ const isOpen = ref(false)
     v-model:open="isOpen"
     class="w-[350px] space-y-2"
   >
-    <div class="flex items-center justify-between space-x-4 px-4">
+    <div class="flex items-center justify-between gap-4 px-4">
       <h4 class="text-sm font-semibold">
         @peduarte starred 3 repositories
       </h4>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
index f9423dff..19ba1c62 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
@@ -49,7 +49,7 @@ const selectedStatus = ref<Status>()
 </script>
 
 <template>
-  <div class="flex items-center space-x-4">
+  <div class="flex items-center gap-4">
     <p class="text-sm text-muted-foreground">
       Status
     </p>
diff --git a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
index 4064e907..6cc4120a 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -242,12 +242,12 @@ const table = useVueTable({
       </Table>
     </div>
 
-    <div class="flex items-center justify-end space-x-2 py-4">
+    <div class="flex items-center justify-end gap-2 py-4">
       <div class="flex-1 text-sm text-muted-foreground">
         {{ table.getFilteredSelectedRowModel().rows.length }} of
         {{ table.getFilteredRowModel().rows.length }} row(s) selected.
       </div>
-      <div class="space-x-2">
+      <div class="flex gap-2">
         <Button
           variant="outline"
           size="sm"
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 c27d8c0d..dc623c9a 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -224,12 +224,12 @@ const table = useVueTable({
       </Table>
     </div>
 
-    <div class="flex items-center justify-end space-x-2 py-4">
+    <div class="flex items-center justify-end gap-2 py-4">
       <div class="flex-1 text-sm text-muted-foreground">
         {{ table.getFilteredSelectedRowModel().rows.length }} of
         {{ table.getFilteredRowModel().rows.length }} row(s) selected.
       </div>
-      <div class="space-x-2">
+      <div class="flex gap-2">
         <Button
           variant="outline"
           size="sm"
diff --git a/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
index 03a0695f..681872d6 100644
--- a/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
+++ b/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
@@ -29,7 +29,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
           Anyone who has this link will be able to view this.
         </DialogDescription>
       </DialogHeader>
-      <div class="flex items-center space-x-2">
+      <div class="flex items-center gap-2">
         <div class="grid flex-1 gap-2">
           <Label for="link" class="sr-only">
             Link
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
index aec72f27..8f6ec0e0 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
@@ -48,7 +48,7 @@ const data = [
           <DrawerDescription>Set your daily activity goal.</DrawerDescription>
         </DrawerHeader>
         <div class="p-4 pb-0">
-          <div class="flex items-center justify-center space-x-2">
+          <div class="flex items-center justify-center gap-2">
             <Button
               variant="outline"
               size="icon"
diff --git a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
index b88c653d..72494b09 100644
--- a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
@@ -22,7 +22,7 @@ import {
       </Button>
     </HoverCardTrigger>
     <HoverCardContent class="w-80">
-      <div class="flex justify-between space-x-4">
+      <div class="flex justify-between gap-4">
         <Avatar>
           <AvatarImage src="https://github.com/vuejs.png" />
           <AvatarFallback>VC</AvatarFallback>
diff --git a/apps/www/src/lib/registry/new-york/example/LabelDemo.vue b/apps/www/src/lib/registry/new-york/example/LabelDemo.vue
index d2cb788f..3ae14be1 100644
--- a/apps/www/src/lib/registry/new-york/example/LabelDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/LabelDemo.vue
@@ -5,7 +5,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
 
 <template>
   <div>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <Checkbox id="terms" />
       <Label for="terms">Accept terms and conditions</Label>
     </div>
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue b/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
index 926fd229..14fd10f7 100644
--- a/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/RadioGroupDemo.vue
@@ -5,15 +5,15 @@ import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-gro
 
 <template>
   <RadioGroup default-value="comfortable" :orientation="'vertical'">
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <RadioGroupItem id="r1" value="default" />
       <Label for="r1">Default</Label>
     </div>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <RadioGroupItem id="r2" value="comfortable" />
       <Label for="r2">Comfortable</Label>
     </div>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center gap-2">
       <RadioGroupItem id="r3" value="compact" />
       <Label for="r3">Compact</Label>
     </div>
diff --git a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
index 13c8efcd..0af51712 100644
--- a/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue
@@ -28,7 +28,7 @@ const works: Artwork[] = [
 
 <template>
   <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
-    <div class="flex p-4 space-x-4 w-max">
+    <div class="flex p-4 gap-4 w-max">
       <div v-for="artwork in works" :key="artwork.id">
         <figure class="shrink-0">
           <div class="overflow-hidden rounded-md">
diff --git a/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue b/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
index 7e4f2f3e..6894add7 100644
--- a/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SeparatorDemo.vue
@@ -13,7 +13,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
       </p>
     </div>
     <Separator class="my-4" />
-    <div class="flex h-5 items-center space-x-4 text-sm">
+    <div class="flex h-5 items-center gap-4 text-sm">
       <div>Blog</div>
       <Separator orientation="vertical" />
       <div>Docs</div>
diff --git a/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue b/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
index a271ddbc..07a553fa 100644
--- a/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SkeletonDemo.vue
@@ -3,7 +3,7 @@ import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
 </script>
 
 <template>
-  <div class="flex items-center space-x-4">
+  <div class="flex items-center gap-4">
     <Skeleton class="h-12 w-12 rounded-full" />
     <div class="space-y-2">
       <Skeleton class="h-4 w-[250px]" />
diff --git a/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue b/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
index a68c5f67..194eb469 100644
--- a/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SwitchDemo.vue
@@ -4,7 +4,7 @@ import { Switch } from '@/lib/registry/new-york/ui/switch'
 </script>
 
 <template>
-  <div class="flex items-center space-x-2">
+  <div class="flex items-center gap-2">
     <Switch id="airplane-mode" />
     <Label for="airplane-mode">Airplane Mode</Label>
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
index f41f106e..e675b462 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/Menubar.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
+        'flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-sm',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
index 14079a5a..c3170cf7 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { type VariantProps, cva } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pe-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',
+  'group pointer-events-auto relative flex w-full items-center justify-between gap-2 overflow-hidden rounded-md border p-4 pe-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',
   {
     variants: {
       variant: {