diff --git a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
index 62138b3b..8482f8bb 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
@@ -21,7 +21,7 @@ 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',
         )"
       >
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
index f24ec1b5..4fb92054 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
@@ -28,7 +28,7 @@ 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',
         )"
       >
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index 2e790151..b63009e5 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -26,7 +26,7 @@ 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',
           )"
         >
diff --git a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
index 44659fba..c81f35a1 100644
--- a/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DateTimePickerDemo.vue
@@ -21,7 +21,7 @@ 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',
         )"
       >
diff --git a/apps/www/src/lib/registry/default/example/DrawerDialog.vue b/apps/www/src/lib/registry/default/example/DrawerDialog.vue
index 6426c5f9..ee6f4972 100644
--- a/apps/www/src/lib/registry/default/example/DrawerDialog.vue
+++ b/apps/www/src/lib/registry/default/example/DrawerDialog.vue
@@ -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/RangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
index 7c4a7519..23c58bd6 100644
--- a/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/default/example/RangePickerWithSlot.vue
@@ -26,7 +26,7 @@ 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',
           )"
         >
diff --git a/apps/www/src/lib/registry/default/example/TypographyDemo.vue b/apps/www/src/lib/registry/default/example/TypographyDemo.vue
index e302937b..afbb34b9 100644
--- a/apps/www/src/lib/registry/default/example/TypographyDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TypographyDemo.vue
@@ -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/TypographyTable.vue b/apps/www/src/lib/registry/default/example/TypographyTable.vue
index 87609006..7da37b24 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/AlertDialogHeader.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogHeader.vue
index c61c4495..0e8c91da 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/dialog/DialogHeader.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogHeader.vue
index b2c9085d..3c2610ac 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/drawer/DrawerHeader.vue b/apps/www/src/lib/registry/default/ui/drawer/DrawerHeader.vue
index ecef7a67..edd6442e 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/sheet/SheetHeader.vue b/apps/www/src/lib/registry/default/ui/sheet/SheetHeader.vue
index 541f48f5..09ddfc4d 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/table/TableHead.vue b/apps/www/src/lib/registry/default/ui/table/TableHead.vue
index 01c21086..21c80cf1 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])]:pe-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/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index 5cfb0ccc..6b2b923b 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -21,7 +21,7 @@ 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',
         )"
       >
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 f1b79f82..2cb3f49e 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
@@ -28,7 +28,7 @@ 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',
         )"
       >
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 a9f57d79..1c798b4d 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -26,7 +26,7 @@ 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',
           )"
         >
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 bf7ae69a..0cb306df 100644
--- a/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DateTimePickerDemo.vue
@@ -21,7 +21,7 @@ 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',
         )"
       >
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 6426c5f9..ee6f4972 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
@@ -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/RangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
index 6b388660..01306031 100644
--- a/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/new-york/example/RangePickerWithSlot.vue
@@ -26,7 +26,7 @@ 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',
           )"
         >
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 c61c4495..0e8c91da 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/dialog/DialogHeader.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogHeader.vue
index b2c9085d..3c2610ac 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/drawer/DrawerHeader.vue b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerHeader.vue
index ecef7a67..edd6442e 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/sheet/SheetHeader.vue b/apps/www/src/lib/registry/new-york/ui/sheet/SheetHeader.vue
index 541f48f5..09ddfc4d 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/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
index 40f2af79..9cb4543b 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])]:pe-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>