feat: migrate from Radix Vue to Reka UI (#6870)

* Initial plan

* Update dependencies and imports from radix-vue to reka-ui

Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

* Fix type errors after reka-ui migration

Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

* Run formatter to fix code style

Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

docs/.vitepress/components/preview-group.vue

@@ -12,7 +12,7 @@ import {
   TabsList,
   TabsRoot,
   TabsTrigger,
-} from 'radix-vue';
+} from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,
@@ -56,7 +56,7 @@ const toggleOpen = () => {
         <TabsList class="relative flex">
           <template v-if="open">
             <TabsIndicator
-              class="absolute bottom-0 left-0 h-[2px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
+              class="absolute bottom-0 left-0 h-[2px] w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
             >
               <div class="size-full bg-[var(--vp-c-indigo-1)]"></div>
             </TabsIndicator>

docs/package.json

@@ -22,7 +22,7 @@
     "ant-design-vue": "catalog:",
     "lucide-vue-next": "catalog:",
     "medium-zoom": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vitepress-plugin-group-icons": "catalog:"
   },
   "devDependencies": {

docs/src/demos/vben-vxe-table/custom-cell/index.vue

@@ -92,7 +92,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
         <Image :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
-        <Switch v-model:checked="row.open" />
+        <Switch v-model="row.open" />
       </template>
       <template #status="{ row }">
         <Tag :color="row.color">{{ row.status }}</Tag>

packages/@core/composables/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vueuse/core": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "sortablejs": "catalog:",
     "vue": "catalog:"
   },

packages/@core/composables/src/index.ts

@@ -10,4 +10,4 @@ export {
   useForwardExpose,
   useForwardProps,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';

packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue

@@ -209,7 +209,7 @@ onBeforeUnmount(() => {
           is(rootMenu.theme, true),
           opened ? '' : 'hidden',
           'overflow-auto',
-          'max-h-[calc(var(--radix-hover-card-content-available-height)-20px)]',
+          'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
         ]"
         :content-props="contentProps"
         :open="true"

packages/@core/ui-kit/shadcn-ui/package.json

@@ -47,7 +47,7 @@
     "@vueuse/core": "catalog:",
     "class-variance-authority": "catalog:",
     "lucide-vue-next": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vee-validate": "catalog:",
     "vue": "catalog:"
   }

packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue

@@ -3,7 +3,7 @@ import type {
   AvatarFallbackProps,
   AvatarImageProps,
   AvatarRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { CSSProperties } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { BreadcrumbProps } from './types';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import BreadcrumbBackground from './breadcrumb-background.vue';
 import Breadcrumb from './breadcrumb.vue';

packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts

@@ -1,4 +1,4 @@
-import type { AsTag } from 'radix-vue';
+import type { AsTag } from 'reka-ui';
 
 import type { Component } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue

@@ -6,7 +6,7 @@ import { computed } from 'vue';
 import { LoaderCircle } from '@vben-core/icons';
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 import { buttonVariants } from '../../ui';
 

packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
 
 import { useId } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import { Checkbox } from '../../ui/checkbox';
 
@@ -11,7 +11,7 @@ const props = defineProps<CheckboxRootProps & { indeterminate?: boolean }>();
 
 const emits = defineEmits<CheckboxRootEmits>();
 
-const checked = defineModel<boolean>('checked');
+const checked = defineModel<boolean>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 
@@ -20,7 +20,7 @@ const id = useId();
 
 <template>
   <div class="flex items-center">
-    <Checkbox v-bind="forwarded" :id="id" v-model:checked="checked" />
+    <Checkbox v-bind="forwarded" :id="id" v-model="checked" />
     <label :for="id" class="ml-2 cursor-pointer text-sm"> <slot></slot> </label>
   </div>
 </template>

packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue

@@ -3,7 +3,7 @@ import type {
   ContextMenuContentProps,
   ContextMenuRootEmits,
   ContextMenuRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -11,7 +11,7 @@ import type { IContextMenuItem } from './interface';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import {
   ContextMenu,

packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue

@@ -3,13 +3,13 @@ import type {
   HoverCardContentProps,
   HoverCardRootEmits,
   HoverCardRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../ui';
 

packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts

@@ -1,2 +1,2 @@
 export { default as VbenHoverCard } from './hover-card.vue';
-export type { HoverCardContentProps } from 'radix-vue';
+export type { HoverCardContentProps } from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue

@@ -84,6 +84,8 @@ onBeforeUnmount(() => {
 });
 
 const id = useId();
+
+const pinType = 'text' as const;
 </script>
 
 <template>
@@ -94,7 +96,7 @@ const id = useId();
     class="flex w-full justify-between"
     otp
     placeholder="○"
-    type="number"
+    :type="pinType"
     @complete="handleComplete"
   >
     <div class="relative flex w-full">

packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue

@@ -3,13 +3,13 @@ import type {
   PopoverContentProps,
   PopoverRootEmits,
   PopoverRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import {
   PopoverContent,

packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue

@@ -3,7 +3,7 @@ import type { SegmentedItem } from './types';
 
 import { computed } from 'vue';
 
-import { TabsTrigger } from 'radix-vue';
+import { TabsTrigger } from 'reka-ui';
 
 import { Tabs, TabsContent, TabsList } from '../../ui';
 import TabsIndicator from './tabs-indicator.vue';

packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TabsIndicatorProps } from 'radix-vue';
+import type { TabsIndicatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsIndicator, useForwardProps } from 'radix-vue';
+import { TabsIndicator, useForwardProps } from 'reka-ui';
 
 const props = defineProps<TabsIndicatorProps & { class?: any }>();
 
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
+        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--reka-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
         props.class,
       )
     "

packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TooltipContentProps } from 'radix-vue';
+import type { TooltipContentProps } from 'reka-ui';
 
 import type { StyleValue } from 'vue';
 

packages/@core/ui-kit/shadcn-ui/src/index.ts

@@ -1,3 +1,3 @@
 export * from './components';
 export * from './ui';
-export { createContext, Slot, VisuallyHidden } from 'radix-vue';
+export { createContext, Slot, VisuallyHidden } from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue';
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
 
-import { AccordionRoot, useForwardPropsEmits } from 'radix-vue';
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<AccordionRootProps>();
 const emits = defineEmits<AccordionRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionContentProps } from 'radix-vue';
+import type { AccordionContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionContent } from 'radix-vue';
+import { AccordionContent } from 'reka-ui';
 
 const props = defineProps<AccordionContentProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionItemProps } from 'radix-vue';
+import type { AccordionItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionItem, useForwardProps } from 'radix-vue';
+import { AccordionItem, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AccordionItemProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { AccordionTriggerProps } from 'radix-vue';
+import type { AccordionTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import { AccordionHeader, AccordionTrigger } from 'radix-vue';
+import { AccordionHeader, AccordionTrigger } from 'reka-ui';
 
 const props = defineProps<AccordionTriggerProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue';
+import type { AlertDialogEmits, AlertDialogProps } from 'reka-ui';
 
-import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue';
+import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<AlertDialogProps>();
 const emits = defineEmits<AlertDialogEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogActionProps } from 'radix-vue';
+import type { AlertDialogActionProps } from 'reka-ui';
 
-import { AlertDialogAction } from 'radix-vue';
+import { AlertDialogAction } from 'reka-ui';
 
 const props = defineProps<AlertDialogActionProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogCancelProps } from 'radix-vue';
+import type { AlertDialogCancelProps } from 'reka-ui';
 
-import { AlertDialogCancel } from 'radix-vue';
+import { AlertDialogCancel } from 'reka-ui';
 
 const props = defineProps<AlertDialogCancelProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
-  AlertDialogContentEmits,
-  AlertDialogContentProps,
-} from 'radix-vue';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -14,7 +11,7 @@ import {
   AlertDialogContent,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import AlertDialogOverlay from './AlertDialogOverlay.vue';
 

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { AlertDialogDescriptionProps } from 'radix-vue';
+import type { AlertDialogDescriptionProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AlertDialogDescription, useForwardProps } from 'radix-vue';
+import { AlertDialogDescription, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from 'radix-vue';
+import type { AlertDialogTitleProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AlertDialogTitle, useForwardProps } from 'radix-vue';
+import { AlertDialogTitle, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AlertDialogTitleProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue

@@ -3,7 +3,7 @@ import type { AvatarVariants } from './avatar';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AvatarRoot } from 'radix-vue';
+import { AvatarRoot } from 'reka-ui';
 
 import { avatarVariant } from './avatar';
 

packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from 'radix-vue';
+import type { AvatarFallbackProps } from 'reka-ui';
 
-import { AvatarFallback } from 'radix-vue';
+import { AvatarFallback } from 'reka-ui';
 
 const props = defineProps<AvatarFallbackProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from 'radix-vue';
+import type { AvatarImageProps } from 'reka-ui';
 
-import { AvatarImage } from 'radix-vue';
+import { AvatarImage } from 'reka-ui';
 
 const props = defineProps<AvatarImageProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
   as: 'a',

packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import type { ButtonVariants, ButtonVariantSize } from './types';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 import { buttonVariants } from './button';
 

packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Check, Minus } from 'lucide-vue-next';
-import {
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
-  CheckboxIndicator,
-  CheckboxRoot,
-  useForwardPropsEmits,
-} from 'radix-vue';
 
 const props = defineProps<
   CheckboxRootProps & { class?: any; indeterminate?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue';
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';
 
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = withDefaults(defineProps<ContextMenuRootProps>(), {
   modal: false,

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -2,7 +2,7 @@
 import type {
   ContextMenuCheckboxItemEmits,
   ContextMenuCheckboxItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   ContextMenuCheckboxItem,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuCheckboxItemEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui';
-  ContextMenuContentEmits,
-  ContextMenuContentProps,
-} from 'radix-vue';
 
 import { computed } from 'vue';
 
@@ -12,7 +9,7 @@ import {
   ContextMenuContent,
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuContentProps & { class?: any }>();
 const emits = defineEmits<ContextMenuContentEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuGroupProps } from 'radix-vue';
+import type { ContextMenuGroupProps } from 'reka-ui';
 
-import { ContextMenuGroup } from 'radix-vue';
+import { ContextMenuGroup } from 'reka-ui';
 
 const props = defineProps<ContextMenuGroupProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue';
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuItem, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuItemProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuLabelProps } from 'radix-vue';
+import type { ContextMenuLabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuLabel } from 'radix-vue';
+import { ContextMenuLabel } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuLabelProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuPortalProps } from 'radix-vue';
+import type { ContextMenuPortalProps } from 'reka-ui';
 
-import { ContextMenuPortal } from 'radix-vue';
+import { ContextMenuPortal } from 'reka-ui';
 
 const props = defineProps<ContextMenuPortalProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue

@@ -2,9 +2,9 @@
 import type {
   ContextMenuRadioGroupEmits,
   ContextMenuRadioGroupProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
-import { ContextMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<ContextMenuRadioGroupProps>();
 const emits = defineEmits<ContextMenuRadioGroupEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue

@@ -2,7 +2,7 @@
 import type {
   ContextMenuRadioItemEmits,
   ContextMenuRadioItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuRadioItemEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuSeparatorProps } from 'radix-vue';
+import type { ContextMenuSeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuSeparator } from 'radix-vue';
+import { ContextMenuSeparator } from 'reka-ui';
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue';
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui';
 
-import { ContextMenuSub, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<ContextMenuSubProps>();
 const emits = defineEmits<ContextMenuSubEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue

@@ -2,13 +2,13 @@
 import type {
   DropdownMenuSubContentEmits,
   DropdownMenuSubContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuSubTriggerProps } from 'radix-vue';
+import type { ContextMenuSubTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { ContextMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { ContextMenuSubTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuSubTriggerProps & {

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuTriggerProps } from 'radix-vue';
+import type { ContextMenuTriggerProps } from 'reka-ui';
 
-import { ContextMenuTrigger, useForwardProps } from 'radix-vue';
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<ContextMenuTriggerProps>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
 
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'reka-ui';
 
-import { DialogClose } from 'radix-vue';
+import { DialogClose } from 'reka-ui';
 
 const props = defineProps<DialogCloseProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -8,7 +8,7 @@ import { computed, ref } from 'vue';
 import { cn } from '@vben-core/shared/utils';
 
 import { X } from 'lucide-vue-next';
-import { DialogClose, DialogContent, useForwardPropsEmits } from 'radix-vue';
+import { DialogClose, DialogContent, useForwardPropsEmits } from 'reka-ui';
 
 import DialogOverlay from './DialogOverlay.vue';
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue';
+import type { DialogDescriptionProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogDescription, useForwardProps } from 'radix-vue';
+import { DialogDescription, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DialogDescriptionProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +12,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = withDefaults(
   defineProps<DialogContentProps & { class?: any; zIndex?: number }>(),

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue';
+import type { DialogTitleProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogTitle, useForwardProps } from 'radix-vue';
+import { DialogTitle, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DialogTitleProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from 'radix-vue';
+import type { DialogTriggerProps } from 'reka-ui';
 
-import { DialogTrigger } from 'radix-vue';
+import { DialogTrigger } from 'reka-ui';
 
 const props = defineProps<DialogTriggerProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue';
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui';
 
-import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
   modal: false,

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -2,7 +2,7 @@
 import type {
   DropdownMenuCheckboxItemEmits,
   DropdownMenuCheckboxItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue

@@ -2,7 +2,7 @@
 import type {
   DropdownMenuContentEmits,
   DropdownMenuContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +12,7 @@ import {
   DropdownMenuContent,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: any }>(),

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuGroupProps } from 'radix-vue';
+import type { DropdownMenuGroupProps } from 'reka-ui';
 
-import { DropdownMenuGroup } from 'radix-vue';
+import { DropdownMenuGroup } from 'reka-ui';
 
 const props = defineProps<DropdownMenuGroupProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from 'radix-vue';
+import type { DropdownMenuItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuItem, useForwardProps } from 'radix-vue';
+import { DropdownMenuItem, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuItemProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from 'radix-vue';
+import type { DropdownMenuLabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuLabel, useForwardProps } from 'radix-vue';
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuLabelProps & { class?: any; inset?: boolean }

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -2,9 +2,9 @@
 import type {
   DropdownMenuRadioGroupEmits,
   DropdownMenuRadioGroupProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
-import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuRadioGroupProps>();
 const emits = defineEmits<DropdownMenuRadioGroupEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -2,7 +2,7 @@
 import type {
   DropdownMenuRadioItemEmits,
   DropdownMenuRadioItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from 'radix-vue';
+import type { DropdownMenuSeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuSeparator } from 'radix-vue';
+import { DropdownMenuSeparator } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuSeparatorProps & {

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue';
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui';
 
-import { DropdownMenuSub, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubProps>();
 const emits = defineEmits<DropdownMenuSubEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -2,13 +2,13 @@
 import type {
   DropdownMenuSubContentEmits,
   DropdownMenuSubContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from 'radix-vue';
+import type { DropdownMenuSubTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { DropdownMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from 'radix-vue';
+import type { DropdownMenuTriggerProps } from 'reka-ui';
 
-import { DropdownMenuTrigger, useForwardProps } from 'radix-vue';
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DropdownMenuTriggerProps>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts

@@ -13,4 +13,4 @@ export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
 export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
 export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
 export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
-export { DropdownMenuPortal } from 'radix-vue';
+export { DropdownMenuPortal } from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue';
+import { Slot } from 'reka-ui';
 
 import { useFormField } from './useFormField';
 

packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LabelProps } from 'radix-vue';
+import type { LabelProps } from 'reka-ui';
 
 import { cn } from '@vben-core/shared/utils';
 

packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { HoverCardRootEmits, HoverCardRootProps } from 'radix-vue';
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui';
 
-import { HoverCardRoot, useForwardPropsEmits } from 'radix-vue';
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<HoverCardRootProps>();
 const emits = defineEmits<HoverCardRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HoverCardContentProps } from 'radix-vue';
+import type { HoverCardContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { HoverCardContent, HoverCardPortal, useForwardProps } from 'radix-vue';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: any }>(),

packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { HoverCardTriggerProps } from 'radix-vue';
+import type { HoverCardTriggerProps } from 'reka-ui';
 
-import { HoverCardTrigger } from 'radix-vue';
+import { HoverCardTrigger } from 'reka-ui';
 
 const props = defineProps<HoverCardTriggerProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { LabelProps } from 'radix-vue';
+import type { LabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Label } from 'radix-vue';
+import { Label } from 'reka-ui';
 
 const props = defineProps<LabelProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<NumberFieldRootProps & { class?: any }>();
 const emits = defineEmits<NumberFieldRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'radix-vue';
+import type { NumberFieldDecrementProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Minus } from 'lucide-vue-next';
-import { NumberFieldDecrement, useForwardProps } from 'radix-vue';
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
 
 const props = defineProps<NumberFieldDecrementProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'radix-vue';
+import type { NumberFieldIncrementProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Plus } from 'lucide-vue-next';
-import { NumberFieldIncrement, useForwardProps } from 'radix-vue';
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
 
 const props = defineProps<NumberFieldIncrementProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@vben-core/shared/utils';
 
-import { NumberFieldInput } from 'radix-vue';
+import { NumberFieldInput } from 'reka-ui';
 </script>
 
 <template>

packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationEllipsisProps } from 'radix-vue';
+import type { PaginationEllipsisProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { MoreHorizontal } from 'lucide-vue-next';
-import { PaginationEllipsis } from 'radix-vue';
+import { PaginationEllipsis } from 'reka-ui';
 
 const props = defineProps<PaginationEllipsisProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationFirstProps } from 'radix-vue';
+import type { PaginationFirstProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronsLeft } from 'lucide-vue-next';
-import { PaginationFirst } from 'radix-vue';
+import { PaginationFirst } from 'reka-ui';
 
 import { Button } from '../button';
 

packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationLastProps } from 'radix-vue';
+import type { PaginationLastProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronsRight } from 'lucide-vue-next';
-import { PaginationLast } from 'radix-vue';
+import { PaginationLast } from 'reka-ui';
 
 import { Button } from '../button';
 

packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationNextProps } from 'radix-vue';
+import type { PaginationNextProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { PaginationNext } from 'radix-vue';
+import { PaginationNext } from 'reka-ui';
 
 import { Button } from '../button';
 

packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationPrevProps } from 'radix-vue';
+import type { PaginationPrevProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronLeft } from 'lucide-vue-next';
-import { PaginationPrev } from 'radix-vue';
+import { PaginationPrev } from 'reka-ui';
 
 import { Button } from '../button';
 

packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts

@@ -7,4 +7,4 @@ export {
   PaginationRoot as Pagination,
   PaginationList,
   PaginationListItem,
-} from 'radix-vue';
+} from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue';
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { PinInputRoot, useForwardPropsEmits } from 'radix-vue';
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<PinInputRootProps & { class?: any }>();
 const emits = defineEmits<PinInputRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'reka-ui';
 
 const props = defineProps<PrimitiveProps & { class?: any }>();
 const delegatedProps = computed(() => {

packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PinInputInputProps } from 'radix-vue';
+import type { PinInputInputProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { PinInputInput, useForwardProps } from 'radix-vue';
+import { PinInputInput, useForwardProps } from 'reka-ui';
 
 const props = defineProps<PinInputInputProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import { Dot } from 'lucide-vue-next';
-import { Primitive, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'reka-ui';
 
 const props = defineProps<PrimitiveProps>();
 const forwardedProps = useForwardProps(props);

packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue';
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
 
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<PopoverRootProps>();
 const emits = defineEmits<PopoverRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue';
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'radix-vue';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,

packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from 'radix-vue';
+import type { PopoverTriggerProps } from 'reka-ui';
 
-import { PopoverTrigger } from 'radix-vue';
+import { PopoverTrigger } from 'reka-ui';
 
 const props = defineProps<PopoverTriggerProps>();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts

@@ -1,4 +1,4 @@
 export { default as Popover } from './Popover.vue';
 export { default as PopoverContent } from './PopoverContent.vue';
 export { default as PopoverTrigger } from './PopoverTrigger.vue';
-export { PopoverAnchor } from 'radix-vue';
+export { PopoverAnchor } from 'reka-ui';

packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { RadioGroupRootEmits, RadioGroupRootProps } from 'radix-vue';
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue';
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<RadioGroupRootProps & { class?: any }>();
 const emits = defineEmits<RadioGroupRootEmits>();

packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { RadioGroupItemProps } from 'radix-vue';
+import type { RadioGroupItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Circle } from 'lucide-vue-next';
-import {
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
-  RadioGroupIndicator,
-  RadioGroupItem,
-  useForwardProps,
-} from 'radix-vue';
 
 const props = defineProps<RadioGroupItemProps & { class?: any }>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue

@@ -2,7 +2,7 @@
 import type {
   SplitterResizeHandleEmits,
   SplitterResizeHandleProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { HTMLAttributes } from 'vue';
 
@@ -11,7 +11,7 @@ import { computed } from 'vue';
 import { GripVertical } from '@vben-core/icons';
 import { cn } from '@vben-core/shared/utils';
 
-import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue';
+import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   SplitterResizeHandleProps & {

packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue';
+import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui';
 
 import type { HTMLAttributes } from 'vue';
 
@@ -7,7 +7,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SplitterGroup, useForwardPropsEmits } from 'radix-vue';
+import { SplitterGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   SplitterGroupProps & { class?: HTMLAttributes['class'] }