diff --git a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
index 2b4ce9a3a..ca82a0d8c 100644
--- a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
@@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button'
 
 <template>
   <Button variant="outline" size="icon">
-    <ChevronRight class="w-4 h-4" />
+    <ChevronRight class="w-4 h-4 rtl:rotate-180" />
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
index 221e14039..6207909c5 100644
--- a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
@@ -5,7 +5,7 @@ import { Button } from '@/lib/registry/default/ui/button'
 
 <template>
   <Button disabled>
-    <Loader2 class="w-4 h-4 mr-2 animate-spin" />
+    <Loader2 class="w-4 h-4 me-2 animate-spin" />
     Please wait
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
index 801e4ebe3..9ace85bac 100644
--- a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
@@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/default/ui/button'
 
 <template>
   <Button>
-    <Mail class="w-4 h-4 mr-2" /> Login with Email
+    <Mail class="w-4 h-4 me-2" /> Login with Email
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/CardChat.vue b/apps/www/src/lib/registry/default/example/CardChat.vue
index 66089f4e3..d1b386096 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>
@@ -105,7 +105,7 @@ const selectedUsers = ref<User[]>([])
           :key="index"
           :class="cn(
             'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',
-            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',
+            message.role === 'user' ? 'ms-auto bg-primary text-primary-foreground' : 'bg-muted',
           )"
         >
           {{ message.content }}
@@ -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({
@@ -168,7 +168,7 @@ const selectedUsers = ref<User[]>([])
                 <AvatarImage :src="user.avatar" alt="Image" />
                 <AvatarFallback>{{ user.name[0] }}</AvatarFallback>
               </Avatar>
-              <div class="ml-2">
+              <div class="ms-2">
                 <p class="text-sm font-medium leading-none">
                   {{ user.name }}
                 </p>
@@ -176,13 +176,13 @@ const selectedUsers = ref<User[]>([])
                   {{ user.email }}
                 </p>
               </div>
-              <Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
+              <Check v-if="selectedUsers.includes(user)" class="ms-auto flex h-5 w-5 text-primary" />
             </CommandItem>
           </CommandGroup>
         </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 81e6eff7d..789db8dea 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">
@@ -67,7 +67,7 @@ const notifications = [
     </CardContent>
     <CardFooter>
       <Button class="w-full">
-        <Check class="mr-2 h-4 w-4" /> Mark all as read
+        <Check class="me-2 h-4 w-4" /> Mark all as read
       </Button>
     </CardFooter>
   </Card>
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 f2445fa87..53c4f15f6 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 e208a04a5..9675882a7 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -104,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(ChevronsUpDown, { class: 'ml-2 h-4 w-4' })])
+      }, ['Email', h(ChevronsUpDown, { class: 'ms-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -178,8 +178,8 @@ const table = useVueTable({
           />
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
-              <Button variant="outline" class="ml-auto">
-                Columns <ChevronDown class="ml-2 h-4 w-4" />
+              <Button variant="outline" class="ms-auto">
+                Columns <ChevronDown class="ms-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -201,7 +201,7 @@ const table = useVueTable({
           <Table>
             <TableHeader>
               <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-                <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:pl-3">
+                <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:ps-3">
                   <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
                 </TableHead>
               </TableRow>
@@ -213,7 +213,7 @@ const table = useVueTable({
                   :key="row.id"
                   :data-state="row.getIsSelected() && 'selected'"
                 >
-                  <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:pl-3">
+                  <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:ps-3">
                     <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                   </TableCell>
                 </TableRow>
@@ -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/CarouselSpacing.vue b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
index 04bc1024d..650a48445 100644
--- a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
@@ -10,8 +10,8 @@ import { Card, CardContent } from '@/lib/registry/default/ui/card'
       align: 'start',
     }"
   >
-    <CarouselContent class="-ml-1">
-      <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+    <CarouselContent class="-ms-1">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="ps-1 md:basis-1/2 lg:basis-1/3">
         <div class="p-1">
           <Card>
             <CardContent class="flex aspect-square items-center justify-center p-6">
diff --git a/apps/www/src/lib/registry/default/example/CheckboxDemo.vue b/apps/www/src/lib/registry/default/example/CheckboxDemo.vue
index 9cdd4a412..0540bc43f 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 bb30177f1..105004430 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 641c719b3..218c81924 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 b0980a307..f2eaab24f 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/ComboboxDemo.vue b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
index da21cf4e6..33d352451 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
@@ -44,7 +44,7 @@ const value = ref<string>('')
         {{ value
           ? frameworks.find((framework) => framework.value === value)?.label
           : "Select framework..." }}
-        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <ChevronsUpDown class="ms-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">
@@ -67,7 +67,7 @@ const value = ref<string>('')
               {{ framework.label }}
               <Check
                 :class="cn(
-                  'ml-auto h-4 w-4',
+                  'ms-auto h-4 w-4',
                   value === framework.value ? 'opacity-100' : 'opacity-0',
                 )"
               />
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
index a274c0c55..671cc98de 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
@@ -42,7 +42,7 @@ const open = ref(false)
 <template>
   <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
     <p class="text-sm font-medium leading-none">
-      <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+      <span class="me-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
         {{ labelRef }}
       </span>
       <span class="text-muted-foreground">Create a new project</span>
@@ -57,17 +57,17 @@ const open = ref(false)
         <DropdownMenuLabel>Actions</DropdownMenuLabel>
         <DropdownMenuGroup>
           <DropdownMenuItem>
-            <User class="mr-2 h-4 w-4" />
+            <User class="me-2 h-4 w-4" />
             Assign to...
           </DropdownMenuItem>
           <DropdownMenuItem>
-            <Calendar class="mr-2 h-4 w-4" />
+            <Calendar class="me-2 h-4 w-4" />
             Set due date...
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>
-              <Tags class="mr-2 h-4 w-4" />
+              <Tags class="me-2 h-4 w-4" />
               Apply label
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent class="p-0">
@@ -97,7 +97,7 @@ const open = ref(false)
           </DropdownMenuSub>
           <DropdownMenuSeparator />
           <DropdownMenuItem class="text-red-600">
-            <Trash class="mr-2 h-4 w-4" />
+            <Trash class="me-2 h-4 w-4" />
             Delete
             <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
           </DropdownMenuItem>
diff --git a/apps/www/src/lib/registry/default/example/ComboboxForm.vue b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
index fe4de4c43..661281b5a 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
@@ -76,7 +76,7 @@ const onSubmit = handleSubmit((values) => {
                 {{ values.language ? languages.find(
                   (language) => language.value === values.language,
                 )?.label : 'Select language...' }}
-                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                <ChevronsUpDown class="ms-2 h-4 w-4 shrink-0 opacity-50" />
               </Button>
             </FormControl>
           </PopoverTrigger>
@@ -97,7 +97,7 @@ const onSubmit = handleSubmit((values) => {
                     }"
                   >
                     <Check
-                      :class="cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
+                      :class="cn('me-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
                     />
                     {{ language.label }}
                   </CommandItem>
diff --git a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
index 4686e4cef..d3f732782 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxPopover.vue
@@ -60,13 +60,13 @@ const statuses: Status[] = [
 ]
 
 const open = ref(false)
-const value = ref<typeof statuses[number]>()
+// const value = ref<typeof statuses[number]>()
 
 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>
@@ -78,7 +78,7 @@ const selectedStatus = ref<Status>()
           class="w-[150px] justify-start"
         >
           <template v-if="selectedStatus">
-            <component :is="selectedStatus?.icon" class="mr-2 h-4 w-4 shrink-0" />
+            <component :is="selectedStatus?.icon" class="me-2 h-4 w-4 shrink-0" />
             {{ selectedStatus?.label }}
           </template>
           <template v-else>
@@ -104,7 +104,7 @@ const selectedStatus = ref<Status>()
                 <component
                   :is="status.icon"
                   :key="status.value"
-                  :class="cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',
+                  :class="cn('me-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',
                   )"
                 />
                 <span>{{ status.label }}</span>
diff --git a/apps/www/src/lib/registry/default/example/CommandDemo.vue b/apps/www/src/lib/registry/default/example/CommandDemo.vue
index df1a42163..0e729f301 100644
--- a/apps/www/src/lib/registry/default/example/CommandDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CommandDemo.vue
@@ -27,32 +27,32 @@ import {
       <CommandEmpty>No results found.</CommandEmpty>
       <CommandGroup heading="Suggestions">
         <CommandItem value="Calendar">
-          <Calendar class="mr-2 h-4 w-4" />
+          <Calendar class="me-2 h-4 w-4" />
           <span>Calendar</span>
         </CommandItem>
         <CommandItem value="Search Emoji">
-          <Smile class="mr-2 h-4 w-4" />
+          <Smile class="me-2 h-4 w-4" />
           <span>Search Emoji</span>
         </CommandItem>
         <CommandItem value="Calculator">
-          <Calculator class="mr-2 h-4 w-4" />
+          <Calculator class="me-2 h-4 w-4" />
           <span>Calculator</span>
         </CommandItem>
       </CommandGroup>
       <CommandSeparator />
       <CommandGroup heading="Settings">
         <CommandItem value="Profile">
-          <User class="mr-2 h-4 w-4" />
+          <User class="me-2 h-4 w-4" />
           <span>Profile</span>
           <CommandShortcut>⌘P</CommandShortcut>
         </CommandItem>
         <CommandItem value="Billing">
-          <CreditCard class="mr-2 h-4 w-4" />
+          <CreditCard class="me-2 h-4 w-4" />
           <span>Billing</span>
           <CommandShortcut>⌘B</CommandShortcut>
         </CommandItem>
         <CommandItem value="Settings">
-          <Settings class="mr-2 h-4 w-4" />
+          <Settings class="me-2 h-4 w-4" />
           <span>Settings</span>
           <CommandShortcut>⌘S</CommandShortcut>
         </CommandItem>
diff --git a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
index ed8271937..d9d4c4a77 100644
--- a/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableColumnPinningDemo.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type {
-  ColumnDef,
   ColumnFiltersState,
   SortingState,
   VisibilityState,
@@ -88,7 +87,7 @@ const columns = [
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
-    cell: ({ row, column }) => {
+    cell: ({ row }) => {
       return h(Checkbox, {
         'checked': row.getIsSelected(),
         'onUpdate:checked': value => row.toggleSelected(!!value),
@@ -108,7 +107,7 @@ const columns = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(ArrowUpDown, { class: 'ms-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   }),
@@ -165,8 +164,6 @@ const table = useVueTable({
     },
   },
 })
-
-const getState = table.getState()
 </script>
 
 <template>
@@ -180,8 +177,8 @@ const getState = table.getState()
       />
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button variant="outline" class="ml-auto">
-            Columns <ChevronDown class="ml-2 h-4 w-4" />
+          <Button variant="outline" class="ms-auto">
+            Columns <ChevronDown class="ms-2 h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
@@ -245,12 +242,12 @@ const getState = table.getState()
       </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 e6e8a1944..b9d79ca28 100644
--- a/apps/www/src/lib/registry/default/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DataTableDemo.vue
@@ -103,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(ArrowUpDown, { class: 'ms-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -171,8 +171,8 @@ const table = useVueTable({
       />
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button variant="outline" class="ml-auto">
-            Columns <ChevronDown class="ml-2 h-4 w-4" />
+          <Button variant="outline" class="ms-auto">
+            Columns <ChevronDown class="ms-2 h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
@@ -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/DatePickerDemo.vue b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
index 18334e635..8482f8bb2 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
@@ -21,11 +21,11 @@ const date = ref<Date>()
       <Button
         :variant="'outline'"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-start font-normal',
           !date && 'text-muted-foreground',
         )"
       >
-        <CalendarIcon class="mr-2 h-4 w-4" />
+        <CalendarIcon class="me-2 h-4 w-4" />
         <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
       </Button>
     </PopoverTrigger>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
index c45446f80..4fb920541 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
@@ -28,11 +28,11 @@ const date = ref<Date>()
       <Button
         variant="outline"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-start font-normal',
           !date && 'text-muted-foreground',
         )"
       >
-        <CalendarIcon class="mr-2 h-4 w-4" />
+        <CalendarIcon class="me-2 h-4 w-4" />
         <template v-if="date">
           {{ format(date, "PPP") }}
         </template>
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index 212b9c068..b63009e5d 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -26,11 +26,11 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[300px] justify-start text-start font-normal',
             !date && 'text-muted-foreground',
           )"
         >
-          <CalendarIcon class="mr-2 h-4 w-4" />
+          <CalendarIcon class="me-2 h-4 w-4" />
 
           <span>
             {{ date.start ? (
diff --git a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
index 883f7a896..c81f35a1d 100644
--- a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
@@ -21,11 +21,11 @@ const date = ref<Date>()
       <Button
         :variant="'outline'"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-start font-normal',
           !date && 'text-muted-foreground',
         )"
       >
-        <CalendarIcon class="mr-2 h-4 w-4" />
+        <CalendarIcon class="me-2 h-4 w-4" />
         <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
       </Button>
     </PopoverTrigger>
diff --git a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
index 7f286bba4..bf5103bd2 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 aec72f279..8f6ec0e06 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/DrawerDialog.vue b/apps/www/src/lib/registry/default/example/DrawerDialog.vue
index 488ca7f00..11b2e3eb1 100644
--- a/apps/www/src/lib/registry/default/example/DrawerDialog.vue
+++ b/apps/www/src/lib/registry/default/example/DrawerDialog.vue
@@ -34,11 +34,11 @@ const isOpen = ref(false)
   <UseTemplate>
     <form class="grid items-start gap-4 px-4">
       <div class="grid gap-2">
-        <Label html-for="email">Email</Label>
+        <Label for="email">Email</Label>
         <Input id="email" type="email" default-value="shadcn@example.com" />
       </div>
       <div class="grid gap-2">
-        <Label html-for="username">Username</Label>
+        <Label for="username">Username</Label>
         <Input id="username" default-value="@shadcn" />
       </div>
       <Button type="submit">
@@ -71,7 +71,7 @@ const isOpen = ref(false)
       </Button>
     </DrawerTrigger>
     <DrawerContent>
-      <DrawerHeader class="text-left">
+      <DrawerHeader class="text-start">
         <DrawerTitle>Edit profile</DrawerTitle>
         <DrawerDescription>
           Make changes to your profile here. Click save when you're done.
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue b/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
index 025a3aa16..dff6420a4 100644
--- a/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
@@ -45,22 +45,22 @@ import {
       <DropdownMenuSeparator />
       <DropdownMenuGroup>
         <DropdownMenuItem>
-          <User class="mr-2 h-4 w-4" />
+          <User class="me-2 h-4 w-4" />
           <span>Profile</span>
           <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuItem>
-          <CreditCard class="mr-2 h-4 w-4" />
+          <CreditCard class="me-2 h-4 w-4" />
           <span>Billing</span>
           <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuItem>
-          <Settings class="mr-2 h-4 w-4" />
+          <Settings class="me-2 h-4 w-4" />
           <span>Settings</span>
           <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuItem>
-          <Keyboard class="mr-2 h-4 w-4" />
+          <Keyboard class="me-2 h-4 w-4" />
           <span>Keyboard shortcuts</span>
           <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
         </DropdownMenuItem>
@@ -68,54 +68,54 @@ import {
       <DropdownMenuSeparator />
       <DropdownMenuGroup>
         <DropdownMenuItem>
-          <Users class="mr-2 h-4 w-4" />
+          <Users class="me-2 h-4 w-4" />
           <span>Team</span>
         </DropdownMenuItem>
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
-            <UserPlus class="mr-2 h-4 w-4" />
+            <UserPlus class="me-2 h-4 w-4" />
             <span>Invite users</span>
           </DropdownMenuSubTrigger>
           <DropdownMenuPortal>
             <DropdownMenuSubContent>
               <DropdownMenuItem>
-                <Mail class="mr-2 h-4 w-4" />
+                <Mail class="me-2 h-4 w-4" />
                 <span>Email</span>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <MessageSquare class="mr-2 h-4 w-4" />
+                <MessageSquare class="me-2 h-4 w-4" />
                 <span>Message</span>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <PlusCircle class="mr-2 h-4 w-4" />
+                <PlusCircle class="me-2 h-4 w-4" />
                 <span>More...</span>
               </DropdownMenuItem>
             </DropdownMenuSubContent>
           </DropdownMenuPortal>
         </DropdownMenuSub>
         <DropdownMenuItem>
-          <Plus class="mr-2 h-4 w-4" />
+          <Plus class="me-2 h-4 w-4" />
           <span>New Team</span>
           <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
         </DropdownMenuItem>
       </DropdownMenuGroup>
       <DropdownMenuSeparator />
       <DropdownMenuItem>
-        <Github class="mr-2 h-4 w-4" />
+        <Github class="me-2 h-4 w-4" />
         <span>GitHub</span>
       </DropdownMenuItem>
       <DropdownMenuItem>
-        <LifeBuoy class="mr-2 h-4 w-4" />
+        <LifeBuoy class="me-2 h-4 w-4" />
         <span>Support</span>
       </DropdownMenuItem>
       <DropdownMenuItem disabled>
-        <Cloud class="mr-2 h-4 w-4" />
+        <Cloud class="me-2 h-4 w-4" />
         <span>API</span>
       </DropdownMenuItem>
       <DropdownMenuSeparator />
       <DropdownMenuItem>
-        <LogOut class="mr-2 h-4 w-4" />
+        <LogOut class="me-2 h-4 w-4" />
         <span>Log out</span>
         <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
       </DropdownMenuItem>
diff --git a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue
index 54e4a8d7f..cda04ec9a 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>
@@ -35,7 +35,7 @@ import {
             Progressive JavaScript framework for building modern web interfaces.
           </p>
           <div class="flex items-center pt-2">
-            <CalendarDays class="mr-2 h-4 w-4 opacity-70" />
+            <CalendarDays class="me-2 h-4 w-4 opacity-70" />
             <span class="text-xs text-muted-foreground">
               Joined January 2014
             </span>
diff --git a/apps/www/src/lib/registry/default/example/InputWithIcon.vue b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
index 04d295ff3..2fcabf183 100644
--- a/apps/www/src/lib/registry/default/example/InputWithIcon.vue
+++ b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
@@ -5,7 +5,7 @@ import { Input } from '@/lib/registry/default/ui/input'
 
 <template>
   <div class="relative w-full max-w-sm items-center">
-    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <Input id="search" type="text" placeholder="Search..." class="ps-10" />
     <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
       <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
     </span>
diff --git a/apps/www/src/lib/registry/default/example/LabelDemo.vue b/apps/www/src/lib/registry/default/example/LabelDemo.vue
index 9dfd33323..8574b4f03 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 a6da7a6f8..7ff0d8e66 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/RangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
index 2add61c6e..23c58bd63 100644
--- a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
@@ -26,11 +26,11 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[300px] justify-start text-start font-normal',
             !date && 'text-muted-foreground',
           )"
         >
-          <CalendarIcon class="mr-2 h-4 w-4" />
+          <CalendarIcon class="me-2 h-4 w-4" />
 
           <span>
             {{ date.start ? (
diff --git a/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue b/apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue
index d687c9a0c..8c966deb7 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 ddd29560e..555d7e4a8 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 33f2beec2..2428f33f9 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 b97c506a9..219d260ec 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/example/ToggleItalicWithTextDemo.vue b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
index c888989c9..fbb7f66d8 100644
--- a/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
@@ -6,7 +6,7 @@ import { Toggle } from '@/lib/registry/default/ui/toggle'
 
 <template>
   <Toggle aria-label="Toggle italic">
-    <Italic class="w-4 h-4 mr-2" />
+    <Italic class="w-4 h-4 me-2" />
     Italic
   </Toggle>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue b/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue
index c3bb658b9..60c37ff12 100644
--- a/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyBlockquote.vue
@@ -1,5 +1,5 @@
 <template>
-  <blockquote class="mt-6 border-l-2 pl-6 italic">
+  <blockquote class="mt-6 border-l-2 ps-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/src/lib/registry/default/example/TypographyDemo.vue b/apps/www/src/lib/registry/default/example/TypographyDemo.vue
index 55020f333..afbb34b92 100644
--- a/apps/www/src/lib/registry/default/example/TypographyDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyDemo.vue
@@ -23,7 +23,7 @@
       </a>
       : he would tax the jokes in the kingdom.
     </p>
-    <blockquote class="mt-6 border-l-2 pl-6 italic">
+    <blockquote class="mt-6 border-l-2 ps-6 italic">
       "After all," he said, "everyone enjoys a good joke, so it's only fair
       that they should pay for the privilege."
     </blockquote>
@@ -34,7 +34,7 @@
       The king's subjects were not amused. They grumbled and complained, but
       the king was firm:
     </p>
-    <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+    <ul class="my-6 ms-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>
@@ -71,12 +71,12 @@
         <thead>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               King's Treasury
             </th>
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               People's happiness
             </th>
@@ -85,36 +85,36 @@
         <tbody>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Empty
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Overflowing
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Modest
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Satisfied
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Full
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Ecstatic
             </td>
diff --git a/apps/www/src/lib/registry/default/example/TypographyList.vue b/apps/www/src/lib/registry/default/example/TypographyList.vue
index a9a2d09fd..f45b9478a 100644
--- a/apps/www/src/lib/registry/default/example/TypographyList.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+  <ul class="my-6 ms-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>
diff --git a/apps/www/src/lib/registry/default/example/TypographyTable.vue b/apps/www/src/lib/registry/default/example/TypographyTable.vue
index 876090069..7da37b244 100644
--- a/apps/www/src/lib/registry/default/example/TypographyTable.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyTable.vue
@@ -4,12 +4,12 @@
       <thead>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             King's Treasury
           </th>
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             People's happiness
           </th>
@@ -18,36 +18,36 @@
       <tbody>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Empty
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Overflowing
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Modest
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Satisfied
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Full
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Ecstatic
           </td>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
index 9f09909e8..d2534ae20 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
+          'fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
index c61c44954..0e8c91dad 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/alert/index.ts b/apps/www/src/lib/registry/default/ui/alert/index.ts
index 765f704d0..c72b06be4 100644
--- a/apps/www/src/lib/registry/default/ui/alert/index.ts
+++ b/apps/www/src/lib/registry/default/ui/alert/index.ts
@@ -5,7 +5,7 @@ export { default as AlertTitle } from './AlertTitle.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
 
 export const alertVariants = cva(
-  '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',
+  'relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index b8c60f3d0..81d8ac5a5 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -80,10 +80,10 @@ const vCalendarSlots = computed(() => {
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
-        <ChevronLeft class="w-4 h-4" />
+        <ChevronLeft class="w-4 h-4 rtl:rotate-180" />
       </button>
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
-        <ChevronRight class="w-4 h-4" />
+        <ChevronRight class="w-4 h-4 rtl:rotate-180" />
       </button>
     </div>
 
@@ -102,11 +102,11 @@ const vCalendarSlots = computed(() => {
       </template>
 
       <template #nav-prev-button>
-        <ChevronLeft />
+        <ChevronLeft class="rtl:rotate-180" />
       </template>
 
       <template #nav-next-button>
-        <ChevronRight />
+        <ChevronRight class="rtl:rotate-180" />
       </template>
     </DatePicker>
   </div>
@@ -193,9 +193,9 @@ const vCalendarSlots = computed(() => {
   @apply w-full relative;
 }
 :root {
-	--vc-slide-translate: 22px;
-	--vc-slide-duration: 0.15s;
-	--vc-slide-timing: ease;
+  --vc-slide-translate: 22px;
+  --vc-slide-duration: 0.15s;
+  --vc-slide-timing: ease;
 }
 
 .calendar .vc-fade-enter-active,
@@ -210,19 +210,19 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-down-leave-active,
 .calendar .vc-slide-fade-enter-active,
 .calendar .vc-slide-fade-leave-active {
-	transition:
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	pointer-events: none;
+  transition:
+    opacity var(--vc-slide-duration) var(--vc-slide-timing),
+    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+  transition:
+    transform var(--vc-slide-duration) var(--vc-slide-timing),
+    opacity var(--vc-slide-duration) var(--vc-slide-timing);
+  transition:
+    transform var(--vc-slide-duration) var(--vc-slide-timing),
+    opacity var(--vc-slide-duration) var(--vc-slide-timing),
+    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  pointer-events: none;
 }
 
 .calendar .vc-none-leave-active,
@@ -231,8 +231,8 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-right-leave-active,
 .calendar .vc-slide-up-leave-active,
 .calendar .vc-slide-down-leave-active {
-	position: absolute !important;
-	width: 100%;
+  position: absolute !important;
+  width: 100%;
 }
 
 .calendar .vc-none-enter-from,
@@ -249,39 +249,39 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-down-leave-to,
 .calendar .vc-slide-fade-enter-from,
 .calendar .vc-slide-fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
 
 .calendar .vc-slide-left-enter-from,
 .calendar .vc-slide-right-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-left,
 .calendar .vc-slide-fade-leave-to.direction-left {
-	-webkit-transform: translateX(var(--vc-slide-translate));
-	transform: translateX(var(--vc-slide-translate));
+  -webkit-transform: translateX(var(--vc-slide-translate));
+  transform: translateX(var(--vc-slide-translate));
 }
 
 .calendar .vc-slide-right-enter-from,
 .calendar .vc-slide-left-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-right,
 .calendar .vc-slide-fade-leave-to.direction-right {
-	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-	transform: translateX(calc(-1 * var(--vc-slide-translate)));
+  -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
+  transform: translateX(calc(-1 * var(--vc-slide-translate)));
 }
 
 .calendar .vc-slide-up-enter-from,
 .calendar .vc-slide-down-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-top,
 .calendar .vc-slide-fade-leave-to.direction-top {
-	-webkit-transform: translateY(var(--vc-slide-translate));
-	transform: translateY(var(--vc-slide-translate));
+  -webkit-transform: translateY(var(--vc-slide-translate));
+  transform: translateY(var(--vc-slide-translate));
 }
 
 .calendar .vc-slide-down-enter-from,
 .calendar .vc-slide-up-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-bottom,
 .calendar .vc-slide-fade-leave-to.direction-bottom {
-	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-	transform: translateY(calc(-1 * var(--vc-slide-translate)));
+  -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+  transform: translateY(calc(-1 * var(--vc-slide-translate)));
 }
 /**
  * Timepicker styles
@@ -305,7 +305,7 @@ const vCalendarSlots = computed(() => {
   @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
 }
 .vc-time-select-group .vc-base-icon {
-  @apply mr-1 text-primary stroke-primary;
+  @apply me-1 text-primary stroke-primary;
 }
 .vc-time-select-group select {
   @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
@@ -314,18 +314,18 @@ const vCalendarSlots = computed(() => {
   @apply text-muted-foreground tracking-wide;
 }
 .vc-time-month {
-  @apply text-primary ml-2;
+  @apply text-primary ms-2;
 }
 .vc-time-day {
-  @apply text-primary ml-1;
+  @apply text-primary ms-1;
 }
 .vc-time-year {
-  @apply text-muted-foreground ml-2;
+  @apply text-muted-foreground ms-2;
 }
 .vc-time-colon {
   @apply mb-0.5;
 }
 .vc-time-decimal {
-  @apply ml-0.5;
+  @apply ms-0.5;
 }
 </style>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
index 87f0e3087..d8d859db8 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
@@ -18,7 +18,7 @@ const { carouselRef, orientation } = useCarousel()
       :class="
         cn(
           'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
           props.class,
         )"
       v-bind="$attrs"
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
index 801e5c162..4759b767b 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
@@ -14,7 +14,7 @@ const { orientation } = useCarousel()
     aria-roledescription="slide"
     :class="cn(
       'min-w-0 shrink-0 grow-0 basis-full',
-      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      orientation === 'horizontal' ? 'ps-4' : 'pt-4',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
index 012f807e8..e1f8d9609 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -17,14 +17,14 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
       'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        : '-bottom-12 start-1/2 -translate-x-1/2 rotate-90',
       props.class,
     )"
     variant="outline"
     @click="scrollNext"
   >
     <slot>
-      <ArrowRight class="h-4 w-4 text-current" />
+      <ArrowRight class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
index 9a71f7359..1373c3867 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -17,14 +17,14 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
       'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        : '-top-12 start-1/2 -translate-x-1/2 rotate-90',
       props.class,
     )"
     variant="outline"
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeft class="h-4 w-4 text-current" />
+      <ArrowLeft class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
index 669237338..cab9f9933 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search class="me-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
index 0d4da9218..67aa26a35 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
index 3025e5aa9..1408c65d2 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ContextMenuCheckboxItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <Check class="h-4 w-4" />
       </ContextMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
index 0ac2f2533..de9d5d89f 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuItem.vue
@@ -8,7 +8,7 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
 
 const delegatedProps = computed(() => {
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
index a10aef122..f4bb331fb 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuLabel.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn('px-2 py-1.5 text-sm font-semibold text-foreground',
-         inset && 'pl-8', props.class,
+         inset && 'ps-8', props.class,
       )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
index 37a39a4eb..b4f29b299 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ContextMenuRadioItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <Circle class="h-2 w-2 fill-current" />
       </ContextMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
index 0d4da9218..67aa26a35 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
index 057ae675e..ef79b8ce4 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubTrigger.vue
@@ -8,7 +8,7 @@ import {
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -24,11 +24,11 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
     <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
   </ContextMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
index 7b3aeaba9..37594aa8f 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -33,14 +33,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
+          'fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
           props.class,
         )"
     >
       <slot />
 
       <DialogClose
-        class="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"
+        class="absolute end-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"
       >
         <X class="w-4 h-4" />
         <span class="sr-only">Close</span>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
index b2c9085d8..3c2610acb 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-start', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
index cd9ba0d24..450599aa2 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
@@ -48,7 +48,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <slot />
 
         <DialogClose
-          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+          class="absolute top-3 end-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
           <X class="w-4 h-4" />
           <span class="sr-only">Close</span>
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue b/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue
index ecef7a67b..edd6442e1 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-start', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index cd21fdeb9..eb435506f 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuCheckboxItem
     v-bind="forwarded"
     :class=" cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <Check class="w-4 h-4" />
       </DropdownMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
index 3360e8721..436a22cd4 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
index ecf9b2fc6..ec21cb0ff 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DropdownMenuLabel
     v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
index c8b9029ce..17c5fafcf 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -27,11 +27,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuRadioItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <Circle class="h-2 w-2 fill-current" />
       </DropdownMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
index abaeda649..f8adfe85d 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest opacity-60', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 3474553db..9af48c5c3 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
index 1e7c3a9fb..3f413dc11 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <MenubarCheckboxItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarItemIndicator>
         <Check class="w-4 h-4" />
       </MenubarItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
index 742e30189..9c809a1c5 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
@@ -8,7 +8,7 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const emits = defineEmits<MenubarItemEmits>()
 
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
index 168df904e..275fc2b08 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarLabel.vue
@@ -3,11 +3,11 @@ import type { HTMLAttributes } from 'vue'
 import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>
 
 <template>
-  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)">
     <slot />
   </MenubarLabel>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
index c97b00db9..c75bdb614 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <MenubarRadioItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarItemIndicator>
         <Circle class="h-2 w-2 fill-current" />
       </MenubarItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
index 0d4da9218..67aa26a35 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
index 3cf8b858c..86730327a 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
@@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from
 import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -20,11 +20,11 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
     <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <ChevronRight class="ms-auto h-4 w-4 rtl:rotate-180" />
   </MenubarSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
index f93d9c221..77dbb20d2 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <ChevronDown
-      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      class="relative top-px ms-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
index 8abf60d1d..53d356872 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <div class="absolute left-0 top-full flex justify-center">
+  <div class="absolute start-0 top-full flex justify-center">
     <NavigationMenuViewport
       v-bind="forwardedProps"
       :class="
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
index 360cb43d5..6ab2f1af9 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationNext v-bind="delegatedProps">
     <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRight class="h-4 w-4" />
+        <ChevronRight class="h-4 w-4 rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationNext>
diff --git a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
index e37aeb642..f3a033270 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationPrev v-bind="delegatedProps">
     <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeft class="h-4 w-4" />
+        <ChevronLeft class="h-4 w-4 rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationPrev>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
index b102a8128..9705d608f 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
@@ -26,12 +26,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        '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',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
         <Check class="h-4 w-4" />
       </SelectItemIndicator>
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
index 3d45cdb6a..acfa2af5f 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectLabel.vue
@@ -7,7 +7,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }
 </script>
 
 <template>
-  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+  <SelectLabel :class="cn('py-1.5 ps-8 pe-2 text-sm font-semibold', props.class)">
     <slot />
   </SelectLabel>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
index 796251823..aa9c3b49b 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
@@ -27,7 +27,7 @@ const props = defineProps<SheetContentProps>()
 const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
+  const { class: _, ...delegated } = props
 
   return delegated
 })
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <slot />
 
       <DialogClose
-        class="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"
+        class="absolute end-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"
       >
         <X class="w-4 h-4 text-muted-foreground" />
       </DialogClose>
diff --git a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
index 541f48f57..09ddfc4db 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
@@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 <template>
   <div
     :class="
-      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+      cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/default/ui/sheet/index.ts b/apps/www/src/lib/registry/default/ui/sheet/index.ts
index fae3f08c4..9e2fc2089 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/index.ts
+++ b/apps/www/src/lib/registry/default/ui/sheet/index.ts
@@ -17,9 +17,9 @@ export const sheetVariants = cva(
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
             'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        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',
+        left: 'inset-y-0 start-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',
         right:
-            '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',
+            'inset-y-0 end-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',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/lib/registry/default/ui/table/TableCell.vue b/apps/www/src/lib/registry/default/ui/table/TableCell.vue
index 4a4da4004..fd52c437d 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableCell.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableCell.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <td
     :class="
       cn(
-        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        'p-4 align-middle [&:has([role=checkbox])]:pe-0',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/table/TableHead.vue b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
index e882b6084..21c80cf1b 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+  <th :class="cn('h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0', props.class)">
     <slot />
   </th>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
index 544eebc4b..e57b99c4b 100644
--- a/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent me-1', props.class)">
     <slot>
       <X class="w-4 h-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
index ab685a51c..01722a63f 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastClose v-bind="delegatedProps" :class="cn('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', props.class)">
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute end-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', props.class)">
     <X class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
index 57deec811..a2ed192b3 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
@@ -13,5 +13,5 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('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]', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:end-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
 </template>
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 dd097c544..adf9f534c 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 pr-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: {
@@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants>
 export interface ToastProps extends ToastRootProps {
   class?: HTMLAttributes['class']
   variant?: ToastVariants['variant']
-  'onOpenChange'?: ((value: boolean) => void) | undefined
+  onOpenChange?: ((value: boolean) => void) | undefined
 }
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
index d1bc3d2d2..94800adc7 100644
--- a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
@@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/new-york/ui/button'
 
 <template>
   <Button variant="outline" size="icon">
-    <ChevronRightIcon class="w-4 h-4" />
+    <ChevronRightIcon class="w-4 h-4 rtl:rotate-180" />
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue
index 6835086e3..a19363411 100644
--- a/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue
@@ -5,7 +5,7 @@ import { Button } from '@/lib/registry/new-york/ui/button'
 
 <template>
   <Button disabled>
-    <ReloadIcon class="w-4 h-4 mr-2 animate-spin" />
+    <ReloadIcon class="w-4 h-4 me-2 animate-spin" />
     Please wait
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue
index 648764a4f..5a5728ada 100644
--- a/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue
@@ -5,6 +5,6 @@ import { Button } from '@/lib/registry/new-york/ui/button'
 
 <template>
   <Button>
-    <EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email
+    <EnvelopeOpenIcon class="w-4 h-4 me-2" /> Login with Email
   </Button>
 </template>
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 a98601dce..ca6d91c26 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>
@@ -105,7 +105,7 @@ const selectedUsers = ref<User[]>([])
           :key="index"
           :class="cn(
             'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',
-            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',
+            message.role === 'user' ? 'ms-auto bg-primary text-primary-foreground' : 'bg-muted',
           )"
         >
           {{ message.content }}
@@ -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({
@@ -168,7 +168,7 @@ const selectedUsers = ref<User[]>([])
                 <AvatarImage :src="user.avatar" alt="Image" />
                 <AvatarFallback>{{ user.name[0] }}</AvatarFallback>
               </Avatar>
-              <div class="ml-2">
+              <div class="ms-2">
                 <p class="text-sm font-medium leading-none">
                   {{ user.name }}
                 </p>
@@ -176,13 +176,13 @@ const selectedUsers = ref<User[]>([])
                   {{ user.email }}
                 </p>
               </div>
-              <CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
+              <CheckIcon v-if="selectedUsers.includes(user)" class="ms-auto flex h-5 w-5 text-primary" />
             </CommandItem>
           </CommandGroup>
         </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 ad8c08835..c43b5f947 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">
@@ -66,7 +66,7 @@ const notifications = [
     </CardContent>
     <CardFooter>
       <Button class="w-full">
-        <CheckIcon class="mr-2 h-4 w-4" /> Mark all as read
+        <CheckIcon class="me-2 h-4 w-4" /> Mark all as read
       </Button>
     </CardFooter>
   </Card>
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 420887d91..38346c5c3 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 2ed40cc38..dfbcfaf7b 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
@@ -104,7 +104,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: 'ms-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -178,8 +178,8 @@ const table = useVueTable({
           />
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
-              <Button variant="outline" class="ml-auto">
-                Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+              <Button variant="outline" class="ms-auto">
+                Columns <ChevronDownIcon class="ms-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -201,7 +201,7 @@ const table = useVueTable({
           <Table>
             <TableHeader>
               <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-                <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:pl-3">
+                <TableHead v-for="header in headerGroup.headers" :key="header.id" class="[&:has([role=checkbox])]:ps-3">
                   <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
                 </TableHead>
               </TableRow>
@@ -213,7 +213,7 @@ const table = useVueTable({
                   :key="row.id"
                   :data-state="row.getIsSelected() && 'selected'"
                 >
-                  <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:pl-3">
+                  <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="[&:has([role=checkbox])]:ps-3">
                     <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                   </TableCell>
                 </TableRow>
@@ -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/CarouselSpacing.vue b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
index 7e4603ca5..1de3a7be5 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
@@ -10,8 +10,8 @@ import { Card, CardContent } from '@/lib/registry/new-york/ui/card'
       align: 'start',
     }"
   >
-    <CarouselContent class="-ml-1">
-      <CarouselItem v-for="(_, index) in 5" :key="index" class="pl-1 md:basis-1/2 lg:basis-1/3">
+    <CarouselContent class="-ms-1">
+      <CarouselItem v-for="(_, index) in 5" :key="index" class="ps-1 md:basis-1/2 lg:basis-1/3">
         <div class="p-1">
           <Card>
             <CardContent class="flex aspect-square items-center justify-center p-6">
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 5f58ce160..e958624cb 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 f754015be..8695d2445 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 1debb3108..3913c3204 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 77868bbf9..f5977d168 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/ComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
index f5f197a26..a1629d9af 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
@@ -44,7 +44,7 @@ const value = ref<string>('')
         {{ value
           ? frameworks.find((framework) => framework.value === value)?.label
           : "Select framework..." }}
-        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <CaretSortIcon class="ms-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0">
@@ -67,7 +67,7 @@ const value = ref<string>('')
               {{ framework.label }}
               <CheckIcon
                 :class="cn(
-                  'ml-auto h-4 w-4',
+                  'ms-auto h-4 w-4',
                   value === framework.value ? 'opacity-100' : 'opacity-0',
                 )"
               />
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
index b45b60232..a0a9c7473 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
@@ -42,7 +42,7 @@ const open = ref(false)
 <template>
   <div class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
     <p class="text-sm font-medium leading-none">
-      <span class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
+      <span class="me-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
         {{ labelRef }}
       </span>
       <span class="text-muted-foreground">Create a new project</span>
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
index 247c08702..6e7edf312 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
@@ -79,7 +79,7 @@ const onSubmit = handleSubmit((values) => {
                 {{ values.language ? languages.find(
                   (language) => language.value === values.language,
                 )?.label : 'Select language...' }}
-                <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                <CaretSortIcon class="ms-2 h-4 w-4 shrink-0 opacity-50" />
               </Button>
             </FormControl>
           </PopoverTrigger>
@@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
                   >
                     {{ language.label }}
                     <CheckIcon
-                      :class="cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
+                      :class="cn('ms-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')"
                     />
                   </CommandItem>
                 </CommandGroup>
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 f9423dffb..19ba1c62f 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/CommandDemo.vue b/apps/www/src/lib/registry/new-york/example/CommandDemo.vue
index 52067aebd..d81aa83d0 100644
--- a/apps/www/src/lib/registry/new-york/example/CommandDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CommandDemo.vue
@@ -27,32 +27,32 @@ import {
       <CommandEmpty>No results found.</CommandEmpty>
       <CommandGroup heading="Suggestions">
         <CommandItem value="Calendar">
-          <CalendarIcon class="mr-2 h-4 w-4" />
+          <CalendarIcon class="me-2 h-4 w-4" />
           <span>Calendar</span>
         </CommandItem>
         <CommandItem value="Search Emoji">
-          <FaceIcon class="mr-2 h-4 w-4" />
+          <FaceIcon class="me-2 h-4 w-4" />
           <span>Search Emoji</span>
         </CommandItem>
         <CommandItem value="Launch">
-          <RocketIcon class="mr-2 h-4 w-4" />
+          <RocketIcon class="me-2 h-4 w-4" />
           <span>Launch</span>
         </CommandItem>
       </CommandGroup>
       <CommandSeparator />
       <CommandGroup heading="Settings">
         <CommandItem value="Profile">
-          <PersonIcon class="mr-2 h-4 w-4" />
+          <PersonIcon class="me-2 h-4 w-4" />
           <span>Profile</span>
           <CommandShortcut>⌘P</CommandShortcut>
         </CommandItem>
         <CommandItem value="Mail">
-          <EnvelopeClosedIcon class="mr-2 h-4 w-4" />
+          <EnvelopeClosedIcon class="me-2 h-4 w-4" />
           <span>Mail</span>
           <CommandShortcut>⌘B</CommandShortcut>
         </CommandItem>
         <CommandItem value="Settings">
-          <GearIcon class="mr-2 h-4 w-4" />
+          <GearIcon class="me-2 h-4 w-4" />
           <span>Settings</span>
           <CommandShortcut>⌘S</CommandShortcut>
         </CommandItem>
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 3d5f7d8c1..6cc4120a4 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type {
-  ColumnDef,
   ColumnFiltersState,
   SortingState,
   VisibilityState,
@@ -88,7 +87,7 @@ const columns = [
       'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value),
       'ariaLabel': 'Select all',
     }),
-    cell: ({ row, column }) => {
+    cell: ({ row }) => {
       return h(Checkbox, {
         'checked': row.getIsSelected(),
         'onUpdate:checked': value => row.toggleSelected(!!value),
@@ -108,7 +107,7 @@ const columns = [
       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: 'ms-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   }),
@@ -165,8 +164,6 @@ const table = useVueTable({
     },
   },
 })
-
-const getState = table.getState()
 </script>
 
 <template>
@@ -180,8 +177,8 @@ const getState = table.getState()
       />
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button variant="outline" class="ml-auto">
-            Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+          <Button variant="outline" class="ms-auto">
+            Columns <ChevronDownIcon class="ms-2 h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
@@ -245,12 +242,12 @@ const getState = table.getState()
       </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 a83220ab4..dc623c9ad 100644
--- a/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DataTableDemo.vue
@@ -103,7 +103,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: 'ms-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },
@@ -171,8 +171,8 @@ const table = useVueTable({
       />
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button variant="outline" class="ml-auto">
-            Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
+          <Button variant="outline" class="ms-auto">
+            Columns <ChevronDownIcon class="ms-2 h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
@@ -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/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index 685f17cb2..6b2b923b1 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -21,11 +21,11 @@ const date = ref<Date>()
       <Button
         :variant="'outline'"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-start font-normal',
           !date && 'text-muted-foreground',
         )"
       >
-        <CalendarIcon class="mr-2 h-4 w-4" />
+        <CalendarIcon class="me-2 h-4 w-4" />
         <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
       </Button>
     </PopoverTrigger>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
index 0e96f721c..2cb3f49ec 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
@@ -28,11 +28,11 @@ const date = ref<Date>()
       <Button
         variant="outline"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-start font-normal',
           !date && 'text-muted-foreground',
         )"
       >
-        <CalendarIcon class="mr-2 h-4 w-4" />
+        <CalendarIcon class="me-2 h-4 w-4" />
         <template v-if="date">
           {{ format(date, "PPP") }}
         </template>
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
index 7b8c3084f..1c798b4dc 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -26,11 +26,11 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[300px] justify-start text-start font-normal',
             !date && 'text-muted-foreground',
           )"
         >
-          <CalendarIcon class="mr-2 h-4 w-4" />
+          <CalendarIcon class="me-2 h-4 w-4" />
 
           <span>
             {{ date.start ? (
diff --git a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue
index 401d89a88..0cb306dff 100644
--- a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue
@@ -21,11 +21,11 @@ const date = ref<Date>()
       <Button
         :variant="'outline'"
         :class="cn(
-          'w-[280px] justify-start text-left font-normal',
+          'w-[280px] justify-start text-start font-normal',
           !date && 'text-muted-foreground',
         )"
       >
-        <CalendarIcon class="mr-2 h-4 w-4" />
+        <CalendarIcon class="me-2 h-4 w-4" />
         <span>{{ date ? format(date, 'PPP - hh:mm') : "Pick a date" }}</span>
       </Button>
     </PopoverTrigger>
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 03a0695f6..681872d61 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 aec72f279..8f6ec0e06 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/DrawerDialog.vue b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
index 488ca7f00..11b2e3eb1 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
@@ -34,11 +34,11 @@ const isOpen = ref(false)
   <UseTemplate>
     <form class="grid items-start gap-4 px-4">
       <div class="grid gap-2">
-        <Label html-for="email">Email</Label>
+        <Label for="email">Email</Label>
         <Input id="email" type="email" default-value="shadcn@example.com" />
       </div>
       <div class="grid gap-2">
-        <Label html-for="username">Username</Label>
+        <Label for="username">Username</Label>
         <Input id="username" default-value="@shadcn" />
       </div>
       <Button type="submit">
@@ -71,7 +71,7 @@ const isOpen = ref(false)
       </Button>
     </DrawerTrigger>
     <DrawerContent>
-      <DrawerHeader class="text-left">
+      <DrawerHeader class="text-start">
         <DrawerTitle>Edit profile</DrawerTitle>
         <DrawerDescription>
           Make changes to your profile here. Click save when you're done.
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 57ea45c82..72494b098 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>
@@ -35,7 +35,7 @@ import {
             Progressive JavaScript framework for building modern web interfaces.
           </p>
           <div class="flex items-center pt-2">
-            <CalendarIcon class="mr-2 h-4 w-4 opacity-70" />
+            <CalendarIcon class="me-2 h-4 w-4 opacity-70" />
             <span class="text-xs text-muted-foreground">
               Joined January 2014
             </span>
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
index 6f61ef7d9..9c8c4ceb4 100644
--- a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
+++ b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
@@ -5,7 +5,7 @@ import { Input } from '@/lib/registry/new-york/ui/input'
 
 <template>
   <div class="relative w-full max-w-sm items-center">
-    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <Input id="search" type="text" placeholder="Search..." class="ps-10" />
     <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
       <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
     </span>
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 d2cb788f2..3ae14be15 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 926fd2290..14fd10f7b 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/RangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
index 6099b11c1..013060310 100644
--- a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
@@ -26,11 +26,11 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[300px] justify-start text-start font-normal',
             !date && 'text-muted-foreground',
           )"
         >
-          <CalendarIcon class="mr-2 h-4 w-4" />
+          <CalendarIcon class="me-2 h-4 w-4" />
 
           <span>
             {{ date.start ? (
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 13c8efcde..0af51712f 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 7e4f2f3e9..6894add75 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 a271ddbce..07a553fa7 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 a68c5f67d..194eb4696 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/example/ToggleItalicWithTextDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue
index 4bb359092..5a679b2d3 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue
@@ -6,7 +6,7 @@ import { Toggle } from '@/lib/registry/new-york/ui/toggle'
 
 <template>
   <Toggle aria-label="Toggle italic">
-    <FontItalicIcon class="w-4 h-4 mr-2" />
+    <FontItalicIcon class="w-4 h-4 me-2" />
     Italic
   </Toggle>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue b/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue
index c3bb658b9..60c37ff12 100644
--- a/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue
+++ b/apps/www/src/lib/registry/new-york/example/TypographyBlockquote.vue
@@ -1,5 +1,5 @@
 <template>
-  <blockquote class="mt-6 border-l-2 pl-6 italic">
+  <blockquote class="mt-6 border-l-2 ps-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/src/lib/registry/new-york/example/TypographyDemo.vue b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
index 55020f333..afbb34b92 100644
--- a/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TypographyDemo.vue
@@ -23,7 +23,7 @@
       </a>
       : he would tax the jokes in the kingdom.
     </p>
-    <blockquote class="mt-6 border-l-2 pl-6 italic">
+    <blockquote class="mt-6 border-l-2 ps-6 italic">
       "After all," he said, "everyone enjoys a good joke, so it's only fair
       that they should pay for the privilege."
     </blockquote>
@@ -34,7 +34,7 @@
       The king's subjects were not amused. They grumbled and complained, but
       the king was firm:
     </p>
-    <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+    <ul class="my-6 ms-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>
@@ -71,12 +71,12 @@
         <thead>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               King's Treasury
             </th>
             <th
-              class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               People's happiness
             </th>
@@ -85,36 +85,36 @@
         <tbody>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Empty
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Overflowing
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Modest
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Satisfied
             </td>
           </tr>
           <tr class="m-0 border-t p-0 even:bg-muted">
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Full
             </td>
             <td
-              class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+              class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
             >
               Ecstatic
             </td>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyList.vue b/apps/www/src/lib/registry/new-york/example/TypographyList.vue
index a9a2d09fd..f45b9478a 100644
--- a/apps/www/src/lib/registry/new-york/example/TypographyList.vue
+++ b/apps/www/src/lib/registry/new-york/example/TypographyList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
+  <ul class="my-6 ms-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>
diff --git a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
index 876090069..7da37b244 100644
--- a/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
+++ b/apps/www/src/lib/registry/new-york/example/TypographyTable.vue
@@ -4,12 +4,12 @@
       <thead>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             King's Treasury
           </th>
           <th
-            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             People's happiness
           </th>
@@ -18,36 +18,36 @@
       <tbody>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Empty
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Overflowing
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Modest
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Satisfied
           </td>
         </tr>
         <tr class="m-0 border-t p-0 even:bg-muted">
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Full
           </td>
           <td
-            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+            class="border px-4 py-2 text-start [&[align=center]]:text-center [&[align=right]]:text-right"
           >
             Ecstatic
           </td>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
index afc76e582..6374e47bd 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
+          'fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
index c61c44954..0e8c91dad 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogHeader.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/index.ts b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
index 1ef587234..799f23aed 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
@@ -5,7 +5,7 @@ export { default as AlertTitle } from './AlertTitle.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
 
 export const alertVariants = cva(
-  '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',
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:ps-7',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index bada5b225..0f8a6b4a5 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -81,10 +81,10 @@ const vCalendarSlots = computed(() => {
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
-        <ChevronLeftIcon class="w-4 h-4" />
+        <ChevronLeftIcon class="w-4 h-4 rtl:rotate-180" />
       </button>
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
-        <ChevronRightIcon class="w-4 h-4" />
+        <ChevronRightIcon class="w-4 h-4 rtl:rotate-180" />
       </button>
     </div>
 
@@ -103,11 +103,11 @@ const vCalendarSlots = computed(() => {
       </template>
 
       <template #nav-prev-button>
-        <ChevronLeft />
+        <ChevronLeftIcon class="rtl:rotate-180" />
       </template>
 
       <template #nav-next-button>
-        <ChevronRight />
+        <ChevronRightIcon class="rtl:rotate-180" />
       </template>
     </DatePicker>
   </div>
@@ -194,9 +194,9 @@ const vCalendarSlots = computed(() => {
   @apply w-full relative;
 }
 :root {
-	--vc-slide-translate: 22px;
-	--vc-slide-duration: 0.15s;
-	--vc-slide-timing: ease;
+  --vc-slide-translate: 22px;
+  --vc-slide-duration: 0.15s;
+  --vc-slide-timing: ease;
 }
 .calendar .vc-fade-enter-active,
 .calendar .vc-fade-leave-active,
@@ -210,19 +210,19 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-down-leave-active,
 .calendar .vc-slide-fade-enter-active,
 .calendar .vc-slide-fade-leave-active {
-	transition:
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing);
-	transition:
-		transform var(--vc-slide-duration) var(--vc-slide-timing),
-		opacity var(--vc-slide-duration) var(--vc-slide-timing),
-		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	pointer-events: none;
+  transition:
+    opacity var(--vc-slide-duration) var(--vc-slide-timing),
+    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+  transition:
+    transform var(--vc-slide-duration) var(--vc-slide-timing),
+    opacity var(--vc-slide-duration) var(--vc-slide-timing);
+  transition:
+    transform var(--vc-slide-duration) var(--vc-slide-timing),
+    opacity var(--vc-slide-duration) var(--vc-slide-timing),
+    -webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  pointer-events: none;
 }
 .calendar .vc-none-leave-active,
 .calendar .vc-fade-leave-active,
@@ -230,8 +230,8 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-right-leave-active,
 .calendar .vc-slide-up-leave-active,
 .calendar .vc-slide-down-leave-active {
-	position: absolute !important;
-	width: 100%;
+  position: absolute !important;
+  width: 100%;
 }
 .calendar .vc-none-enter-from,
 .calendar .vc-none-leave-to,
@@ -247,35 +247,35 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-down-leave-to,
 .calendar .vc-slide-fade-enter-from,
 .calendar .vc-slide-fade-leave-to {
-	opacity: 0;
+  opacity: 0;
 }
 .calendar .vc-slide-left-enter-from,
 .calendar .vc-slide-right-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-left,
 .calendar .vc-slide-fade-leave-to.direction-left {
-	-webkit-transform: translateX(var(--vc-slide-translate));
-	transform: translateX(var(--vc-slide-translate));
+  -webkit-transform: translateX(var(--vc-slide-translate));
+  transform: translateX(var(--vc-slide-translate));
 }
 .calendar .vc-slide-right-enter-from,
 .calendar .vc-slide-left-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-right,
 .calendar .vc-slide-fade-leave-to.direction-right {
-	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
-	transform: translateX(calc(-1 * var(--vc-slide-translate)));
+  -webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
+  transform: translateX(calc(-1 * var(--vc-slide-translate)));
 }
 .calendar .vc-slide-up-enter-from,
 .calendar .vc-slide-down-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-top,
 .calendar .vc-slide-fade-leave-to.direction-top {
-	-webkit-transform: translateY(var(--vc-slide-translate));
-	transform: translateY(var(--vc-slide-translate));
+  -webkit-transform: translateY(var(--vc-slide-translate));
+  transform: translateY(var(--vc-slide-translate));
 }
 .calendar .vc-slide-down-enter-from,
 .calendar .vc-slide-up-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-bottom,
 .calendar .vc-slide-fade-leave-to.direction-bottom {
-	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
-	transform: translateY(calc(-1 * var(--vc-slide-translate)));
+  -webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+  transform: translateY(calc(-1 * var(--vc-slide-translate)));
 }
 /**
  * Timepicker styles
@@ -299,7 +299,7 @@ const vCalendarSlots = computed(() => {
   @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
 }
 .vc-time-select-group .vc-base-icon {
-  @apply mr-1 text-primary stroke-primary;
+  @apply me-1 text-primary stroke-primary;
 }
 .vc-time-select-group select {
   @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
@@ -308,18 +308,18 @@ const vCalendarSlots = computed(() => {
   @apply text-muted-foreground tracking-wide;
 }
 .vc-time-month {
-  @apply text-primary ml-2;
+  @apply text-primary ms-2;
 }
 .vc-time-day {
-  @apply text-primary ml-1;
+  @apply text-primary ms-1;
 }
 .vc-time-year {
-  @apply text-muted-foreground ml-2;
+  @apply text-muted-foreground ms-2;
 }
 .vc-time-colon {
   @apply mb-0.5;
 }
 .vc-time-decimal {
-  @apply ml-0.5;
+  @apply ms-0.5;
 }
 </style>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
index 87f0e3087..d8d859db8 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
@@ -18,7 +18,7 @@ const { carouselRef, orientation } = useCarousel()
       :class="
         cn(
           'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          orientation === 'horizontal' ? '-ms-4' : '-mt-4 flex-col',
           props.class,
         )"
       v-bind="$attrs"
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
index 801e5c162..4759b767b 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
@@ -14,7 +14,7 @@ const { orientation } = useCarousel()
     aria-roledescription="slide"
     :class="cn(
       'min-w-0 shrink-0 grow-0 basis-full',
-      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      orientation === 'horizontal' ? 'ps-4' : 'pt-4',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
index 39c1daa75..3ae9372f7 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -17,14 +17,14 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
       'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        : '-bottom-12 start-1/2 -translate-x-1/2 rotate-90',
       props.class,
     )"
     variant="outline"
     @click="scrollNext"
   >
     <slot>
-      <ArrowRightIcon class="h-4 w-4 text-current" />
+      <ArrowRightIcon class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
index adb34c690..154861c77 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -17,14 +17,14 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
       'touch-manipulation absolute h-8 w-8 rounded-full p-0',
       orientation === 'horizontal'
         ? '-left-12 top-1/2 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        : '-top-12 start-1/2 -translate-x-1/2 rotate-90',
       props.class,
     )"
     variant="outline"
     @click="scrollPrev"
   >
     <slot>
-      <ArrowLeftIcon class="h-4 w-4 text-current" />
+      <ArrowLeftIcon class="h-4 w-4 text-current rtl:rotate-180" />
     </slot>
   </Button>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
index c0a672657..d9494d701 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandInput.vue
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <MagnifyingGlassIcon class="me-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus
diff --git a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue b/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
index 0d4da9218..67aa26a35 100644
--- a/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/command/CommandShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
index aca45cd8b..7bda74a9d 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ContextMenuCheckboxItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <CheckIcon class="h-4 w-4" />
       </ContextMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
index 0ac2f2533..de9d5d89f 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuItem.vue
@@ -8,7 +8,7 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
 
 const delegatedProps = computed(() => {
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
index a10aef122..f4bb331fb 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuLabel.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn('px-2 py-1.5 text-sm font-semibold text-foreground',
-         inset && 'pl-8', props.class,
+         inset && 'ps-8', props.class,
       )"
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index b1df78027..cf8d5c81e 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ContextMenuRadioItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <DotFilledIcon class="h-4 w-4 fill-current" />
       </ContextMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
index 0d4da9218..67aa26a35 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
index 9ba6176a2..35c93e89a 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubTrigger.vue
@@ -8,7 +8,7 @@ import {
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -24,11 +24,11 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
   </ContextMenuSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index d8699c291..90b1d6cce 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@@ -33,14 +33,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
+          'fixed start-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 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',
           props.class,
         )"
     >
       <slot />
 
       <DialogClose
-        class="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"
+        class="absolute end-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"
       >
         <Cross2Icon class="w-4 h-4" />
         <span class="sr-only">Close</span>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
index b2c9085d8..3c2610acb 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-start', props.class)"
   >
     <slot />
   </div>
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
index 12228f13d..fa5988959 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogScrollContent.vue
@@ -9,7 +9,6 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
@@ -48,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <slot />
 
         <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+          class="absolute top-4 end-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
           <Cross2Icon class="w-4 h-4" />
           <span class="sr-only">Close</span>
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue
index ecef7a67b..edd6442e1 100644
--- a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-start', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index a6792a7a6..589c2ae99 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuCheckboxItem
     v-bind="forwarded"
     :class=" cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <CheckIcon class="w-4 h-4" />
       </DropdownMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
index 3360e8721..436a22cd4 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuItem.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
index ecf9b2fc6..ec21cb0ff 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -3,7 +3,7 @@ import { type HTMLAttributes, computed } from 'vue'
 import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DropdownMenuLabel
     v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index a2fef4c98..055f489ab 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -27,11 +27,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuRadioItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <DotFilledIcon class="h-4 w-4 fill-current" />
       </DropdownMenuItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
index abaeda649..f8adfe85d 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest opacity-60', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 00d04e090..13d393aa9 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -28,6 +28,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
   </DropdownMenuSubTrigger>
 </template>
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 f41f106ec..e675b4628 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/menubar/MenubarCheckboxItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
index e2724bfff..0ffb94494 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarCheckboxItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <MenubarCheckboxItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarItemIndicator>
         <CheckIcon class="w-4 h-4" />
       </MenubarItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
index 742e30189..9c809a1c5 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarItem.vue
@@ -8,7 +8,7 @@ import {
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const emits = defineEmits<MenubarItemEmits>()
 
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
index 168df904e..275fc2b08 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarLabel.vue
@@ -3,11 +3,11 @@ import type { HTMLAttributes } from 'vue'
 import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>
 
 <template>
-  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'ps-8', props.class)">
     <slot />
   </MenubarLabel>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
index c3ddbe3b8..3830b55fe 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarRadioItem.vue
@@ -26,11 +26,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <MenubarRadioItem
     v-bind="forwarded"
     :class="cn(
-      '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',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       props.class,
     )"
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarItemIndicator>
         <DotFilledIcon class="h-4 w-4 fill-current" />
       </MenubarItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
index 0d4da9218..67aa26a35 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarShortcut.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span :class="cn('ms-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
index 80b2a8917..6f2dba7f2 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubTrigger.vue
@@ -4,7 +4,7 @@ import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from
 import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -20,11 +20,11 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn(
       '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',
-      inset && 'pl-8',
+      inset && 'ps-8',
       props.class,
     )"
   >
     <slot />
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRightIcon class="ms-auto h-4 w-4 rtl:rotate-180" />
   </MenubarSubTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index 3c37c3d6b..45622d642 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <ChevronDownIcon
-      class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      class="relative top-px ms-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index db240ccce..9c6c774d5 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <div class="absolute left-0 top-full flex justify-center">
+  <div class="absolute start-0 top-full flex justify-center">
     <NavigationMenuViewport
       v-bind="forwardedProps"
       :class="
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
index ecb8735d6..365cbd365 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationFirst.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationFirst v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowLeftIcon />
+        <DoubleArrowLeftIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationFirst>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
index d1c06f849..d822df0ac 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationLast.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationLast v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <DoubleArrowRightIcon />
+        <DoubleArrowRightIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationLast>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
index 360f5f28d..11a08c7ac 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationNext.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationNext v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRightIcon />
+        <ChevronRightIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationNext>
diff --git a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
index 12d512053..00c4af2dc 100644
--- a/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pagination/PaginationPrev.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
   <PaginationPrev v-bind="delegatedProps">
     <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeftIcon />
+        <ChevronLeftIcon class="rtl:rotate-180" />
       </slot>
     </Button>
   </PaginationPrev>
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
index c9a5cf7b3..6fca209dc 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectItem.vue
@@ -26,12 +26,12 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        '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',
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         props.class,
       )
     "
   >
-    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute end-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
         <CheckIcon class="h-4 w-4" />
       </SelectItemIndicator>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
index 188b69d79..468e717b6 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetContent.vue
@@ -27,7 +27,7 @@ const props = defineProps<SheetContentProps>()
 const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
+  const { class: _, ...delegated } = props
 
   return delegated
 })
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <slot />
 
       <DialogClose
-        class="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"
+        class="absolute end-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"
       >
         <Cross2Icon class="w-4 h-4" />
       </DialogClose>
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
index 541f48f57..09ddfc4db 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
@@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 <template>
   <div
     :class="
-      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+      cn('flex flex-col gap-y-2 text-center sm:text-start', props.class)
     "
   >
     <slot />
diff --git a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
index fae3f08c4..9e2fc2089 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
@@ -17,9 +17,9 @@ export const sheetVariants = cva(
         top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
             'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        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',
+        left: 'inset-y-0 start-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',
         right:
-            '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',
+            'inset-y-0 end-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',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
index 40c1f43e1..9390b5e9d 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <td
     :class="
       cn(
-        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+        'p-2 align-middle [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0.5',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
index 11fb10102..9cb4543b6 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
+  <th :class="cn('h-10 px-2 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
     <slot />
   </th>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
index c72ee631d..a221676e8 100644
--- a/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent me-1', props.class)">
     <slot>
       <Cross2Icon class="w-4 h-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
index 782cf184c..9e717f6aa 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastClose v-bind="delegatedProps" :class="cn('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', props.class)">
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute end-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', props.class)">
     <Cross2Icon class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
index 57deec811..a2ed192b3 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastViewport.vue
@@ -13,5 +13,5 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('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]', props.class)" />
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:end-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
 </template>
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 a90780c61..c3170cf74 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 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',
+  '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: {
@@ -34,5 +34,5 @@ type ToastVariants = VariantProps<typeof toastVariants>
 export interface ToastProps extends ToastRootProps {
   class?: HTMLAttributes['class']
   variant?: ToastVariants['variant']
-  'onOpenChange'?: ((value: boolean) => void) | undefined
+  onOpenChange?: ((value: boolean) => void) | undefined
 }