diff --git a/components.json b/components.json
index 37204273..73fcc132 100644
--- a/components.json
+++ b/components.json
@@ -8,9 +8,9 @@
     "baseColor": "neutral",
     "cssVariables": true
   },
-  "framework": "vite",
   "aliases": {
     "components": "@/ui/shadcn",
-    "utils": "@/utils"
+    "utils": "@/utils",
+    "lib": "@/utils"
   }
 }
diff --git a/package.json b/package.json
index 69bcf57e..ad0aa609 100755
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "type": "module",
+  "packageManager": "pnpm@9.10.0",
   "engines": {
     "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
   },
@@ -54,7 +55,7 @@
     "print-js": "^1.6.0",
     "qrcode": "^1.5.4",
     "qs": "^6.14.0",
-    "radix-vue": "^1.9.17",
+    "reka-ui": "^2.0.2",
     "scule": "^1.3.0",
     "splitpanes": "^3.1.8",
     "swiper": "^11.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54fd89a1..29210ad6 100755
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -113,9 +113,9 @@ importers:
       qs:
         specifier: ^6.14.0
         version: 6.14.0
-      radix-vue:
-        specifier: ^1.9.17
-        version: 1.9.17(vue@3.5.13(typescript@5.8.2))
+      reka-ui:
+        specifier: ^2.0.2
+        version: 2.0.2(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
       scule:
         specifier: ^1.3.0
         version: 1.3.0
@@ -2731,9 +2731,6 @@ packages:
   '@vueuse/components@12.7.0':
     resolution: {integrity: sha512-LbaKPOx9sTPRxI8ymJt3VCm2CifmC432yaXxCGbjkuKIh2jyNlXvE7sGrLm7kbC7WkBJnUXzm3K/cI1pIE8ueQ==}
 
-  '@vueuse/core@10.11.1':
-    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
-
   '@vueuse/core@12.7.0':
     resolution: {integrity: sha512-jtK5B7YjZXmkGNHjviyGO4s3ZtEhbzSgrbX+s5o+Lr8i2nYqNyHuPVOeTdM1/hZ5Tkxg/KktAuAVDDiHMraMVA==}
 
@@ -2781,18 +2778,12 @@ packages:
       universal-cookie:
         optional: true
 
-  '@vueuse/metadata@10.11.1':
-    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
-
   '@vueuse/metadata@12.7.0':
     resolution: {integrity: sha512-4VvTH9mrjXqFN5LYa5YfqHVRI6j7R00Vy4995Rw7PQxyCL3z0Lli86iN4UemWqixxEvYfRjG+hF9wL8oLOn+3g==}
 
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
-  '@vueuse/shared@10.11.1':
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
-
   '@vueuse/shared@12.7.0':
     resolution: {integrity: sha512-coLlUw2HHKsm7rPN6WqHJQr18WymN4wkA/3ThFaJ4v4gWGWAQQGK+MJxLuJTBs4mojQiazlVWAKNJNpUWGRkNw==}
 
@@ -5666,11 +5657,6 @@ packages:
     engines: {node: ^18 || >=20}
     hasBin: true
 
-  nanoid@5.1.2:
-    resolution: {integrity: sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-
   nanomatch@1.2.13:
     resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
     engines: {node: '>=0.10.0'}
@@ -6204,11 +6190,6 @@ packages:
   queue-tick@1.0.1:
     resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}
 
-  radix-vue@1.9.17:
-    resolution: {integrity: sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==}
-    peerDependencies:
-      vue: '>= 3.2.0'
-
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -6309,6 +6290,11 @@ packages:
   rehype-stringify@9.0.4:
     resolution: {integrity: sha512-Uk5xu1YKdqobe5XpSskwPvo1XeHUUucWEQSl8hTrXt5selvca1e8K1EZ37E6YoZ4BT8BCqCdVfQW7OfHfthtVQ==}
 
+  reka-ui@2.0.2:
+    resolution: {integrity: sha512-pC2UF6Z+kJF96aJvIErhkSO4DJYIeq9pgvh3pntNqcZb3zFGMzw8h2uny+GnLX2CKiQV54kZNYXxecYIiPMGyg==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   remark-gfm@3.0.1:
     resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
 
@@ -10616,16 +10602,6 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/core@10.11.1(vue@3.5.13(typescript@5.8.2))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 10.11.1
-      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.8.2))
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.8.2))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/core@12.7.0(typescript@5.8.2)':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -10658,19 +10634,10 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/metadata@10.11.1': {}
-
   '@vueuse/metadata@12.7.0': {}
 
   '@vueuse/metadata@9.13.0': {}
 
-  '@vueuse/shared@10.11.1(vue@3.5.13(typescript@5.8.2))':
-    dependencies:
-      vue-demi: 0.14.10(vue@3.5.13(typescript@5.8.2))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/shared@12.7.0(typescript@5.8.2)':
     dependencies:
       vue: 3.5.13(typescript@5.8.2)
@@ -14179,8 +14146,6 @@ snapshots:
 
   nanoid@5.1.0: {}
 
-  nanoid@5.1.2: {}
-
   nanomatch@1.2.13:
     dependencies:
       arr-diff: 4.0.0
@@ -14743,23 +14708,6 @@ snapshots:
 
   queue-tick@1.0.1: {}
 
-  radix-vue@1.9.17(vue@3.5.13(typescript@5.8.2)):
-    dependencies:
-      '@floating-ui/dom': 1.6.13
-      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.8.2))
-      '@internationalized/date': 3.7.0
-      '@internationalized/number': 3.6.0
-      '@tanstack/vue-virtual': 3.13.2(vue@3.5.13(typescript@5.8.2))
-      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.8.2))
-      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.8.2))
-      aria-hidden: 1.2.4
-      defu: 6.1.4
-      fast-deep-equal: 3.1.3
-      nanoid: 5.1.2
-      vue: 3.5.13(typescript@5.8.2)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-
   radix3@1.1.2: {}
 
   read-package-json-fast@4.0.0:
@@ -14896,6 +14844,23 @@ snapshots:
       hast-util-to-html: 8.0.4
       unified: 10.1.2
 
+  reka-ui@2.0.2(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.8.2))
+      '@internationalized/date': 3.7.0
+      '@internationalized/number': 3.6.0
+      '@tanstack/vue-virtual': 3.13.2(vue@3.5.13(typescript@5.8.2))
+      '@vueuse/core': 12.7.0(typescript@5.8.2)
+      '@vueuse/shared': 12.7.0(typescript@5.8.2)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      ohash: 1.1.4
+      vue: 3.5.13(typescript@5.8.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   remark-gfm@3.0.1:
     dependencies:
       '@types/mdast': 3.0.15
diff --git a/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue b/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue
index 6e82da94..938e5a23 100644
--- a/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue
+++ b/src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue
@@ -37,7 +37,7 @@ function toggleColorScheme(event: MouseEvent) {
 </script>
 
 <template>
-  <FaButton variant="ghost" size="icon" @click="toggleColorScheme">
+  <FaButton variant="ghost" size="icon" class="size-9" @click="toggleColorScheme">
     <FaIcon
       :name="{
         light: 'i-ri:sun-line',
diff --git a/src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue b/src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue
index d3ead57a..a45ae27a 100644
--- a/src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue
+++ b/src/layouts/components/Topbar/Toolbar/Fullscreen/index.vue
@@ -12,7 +12,7 @@ const { isFullscreen, toggle } = useFullscreen()
 </script>
 
 <template>
-  <FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" @click="toggle">
+  <FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" class="size-9" @click="toggle">
     <FaIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" class="size-4" />
   </FaButton>
 </template>
diff --git a/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue b/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
index 069a7984..01fe0aa9 100644
--- a/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
+++ b/src/layouts/components/Topbar/Toolbar/NavSearch/index.vue
@@ -12,7 +12,7 @@ const isShow = ref(false)
 </script>
 
 <template>
-  <FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3': settingsStore.mode === 'pc' }" @click="isShow = true">
+  <FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3 h-9': settingsStore.mode === 'pc', 'size-9': settingsStore.mode !== 'pc' }" @click="isShow = true">
     <FaIcon name="i-ri:search-line" class="size-4" />
     <template v-if="settingsStore.mode === 'pc'">
       <span class="text-sm text-muted-foreground/60 transition group-hover-text-muted-foreground">搜索</span>
diff --git a/src/layouts/components/Topbar/Toolbar/PageReload/index.vue b/src/layouts/components/Topbar/Toolbar/PageReload/index.vue
index 274608a6..bb60ec24 100644
--- a/src/layouts/components/Topbar/Toolbar/PageReload/index.vue
+++ b/src/layouts/components/Topbar/Toolbar/PageReload/index.vue
@@ -41,7 +41,7 @@ function handleCtrlClick() {
         <p>可切换为浏览器原生刷新</p>
       </div>
     </template>
-    <FaButton variant="ghost" size="icon" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+    <FaButton variant="ghost" size="icon" class="size-9" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
       <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
     </FaButton>
   </FaTooltip>
diff --git a/src/ui/components/FaAvatar/avatar/Avatar.vue b/src/ui/components/FaAvatar/avatar/Avatar.vue
index 7ac4ab43..94986359 100644
--- a/src/ui/components/FaAvatar/avatar/Avatar.vue
+++ b/src/ui/components/FaAvatar/avatar/Avatar.vue
@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import type { AvatarVariants } from '.'
 import { cn } from '@/utils'
-import { AvatarRoot } from 'radix-vue'
+import { AvatarRoot } from 'reka-ui'
 import { avatarVariant } from '.'
 
 const props = withDefaults(defineProps<{
diff --git a/src/ui/components/FaAvatar/avatar/AvatarFallback.vue b/src/ui/components/FaAvatar/avatar/AvatarFallback.vue
index 1ac23e62..ad284388 100644
--- a/src/ui/components/FaAvatar/avatar/AvatarFallback.vue
+++ b/src/ui/components/FaAvatar/avatar/AvatarFallback.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from 'radix-vue'
-import { AvatarFallback } from 'radix-vue'
+import type { AvatarFallbackProps } from 'reka-ui'
+import { AvatarFallback } from 'reka-ui'
 
 const props = defineProps<AvatarFallbackProps>()
 </script>
diff --git a/src/ui/components/FaAvatar/avatar/AvatarImage.vue b/src/ui/components/FaAvatar/avatar/AvatarImage.vue
index 6ef58f74..8efeecb0 100644
--- a/src/ui/components/FaAvatar/avatar/AvatarImage.vue
+++ b/src/ui/components/FaAvatar/avatar/AvatarImage.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from 'radix-vue'
-import { AvatarImage } from 'radix-vue'
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
 
 const props = defineProps<AvatarImageProps>()
 </script>
 
 <template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
 </template>
diff --git a/src/ui/components/FaButton/button/Button.vue b/src/ui/components/FaButton/button/Button.vue
index 3f686fd1..8f61e57e 100644
--- a/src/ui/components/FaButton/button/Button.vue
+++ b/src/ui/components/FaButton/button/Button.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '.'
 import { cn } from '@/utils'
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 import { buttonVariants } from '.'
 
 interface Props extends PrimitiveProps {
diff --git a/src/ui/components/FaButton/button/index.ts b/src/ui/components/FaButton/button/index.ts
index 06ef5665..dcfa01bc 100644
--- a/src/ui/components/FaButton/button/index.ts
+++ b/src/ui/components/FaButton/button/index.ts
@@ -8,22 +8,21 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
diff --git a/src/ui/components/FaCheckbox/checkbox/Checkbox.vue b/src/ui/components/FaCheckbox/checkbox/Checkbox.vue
index f3fd3776..3e6b1f9c 100644
--- a/src/ui/components/FaCheckbox/checkbox/Checkbox.vue
+++ b/src/ui/components/FaCheckbox/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 type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenu.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenu.vue
index 363e9c6b..d95845c8 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenu.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue
index 172909f2..0b8b042b 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuCheckboxItem.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'radix-vue'
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
-
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue
index 0c125305..b14f1147 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuContent.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuContentEmits, ContextMenuContentProps } from 'radix-vue'
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuContent,
-
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue
index 4dda085d..bb1c2a56 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuGroupProps } from 'radix-vue'
-import { ContextMenuGroup } from 'radix-vue'
+import type { ContextMenuGroupProps } from 'reka-ui'
+import { ContextMenuGroup } from 'reka-ui'
 
 const props = defineProps<ContextMenuGroupProps>()
 </script>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue
index 0658c59a..da2a747d 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuItem.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue'
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuItem,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue
index 0de1c911..6130bb59 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuLabel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ContextMenuLabelProps } from 'radix-vue'
+import type { ContextMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ContextMenuLabel } from 'radix-vue'
+import { ContextMenuLabel } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
@@ -17,10 +17,7 @@ const delegatedProps = computed(() => {
 <template>
   <ContextMenuLabel
     v-bind="delegatedProps"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
-         inset && 'pl-8', props.class,
-      )"
+    :class="cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', props.class)"
   >
     <slot />
   </ContextMenuLabel>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue
index 28e2192d..93c8b22e 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuPortal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuPortalProps } from 'radix-vue'
-import { ContextMenuPortal } from 'radix-vue'
+import type { ContextMenuPortalProps } from 'reka-ui'
+import { ContextMenuPortal } from 'reka-ui'
 
 const props = defineProps<ContextMenuPortalProps>()
 </script>
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue
index a40feffb..50a9142b 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioGroup.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'radix-vue'
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'reka-ui'
 import {
   ContextMenuRadioGroup,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuRadioGroupProps>()
 const emits = defineEmits<ContextMenuRadioGroupEmits>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue
index 04e19d28..bc24795e 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuRadioItem.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'radix-vue'
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue
index 1ab735e2..705b61d0 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSeparator.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { ContextMenuSeparatorProps } from 'radix-vue'
+import type { ContextMenuSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuSeparator,
-
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue
index 0d3c61db..9892b287 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSub.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue'
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui'
 import {
   ContextMenuSub,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<ContextMenuSubProps>()
 const emits = defineEmits<ContextMenuSubEmits>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue
index bc1a80e3..2c08d940 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubContent.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ContextMenuSubContent,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue
index 8bcdd5dd..852e7eca 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuSubTrigger.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuSubTriggerProps } from 'radix-vue'
+import type { ContextMenuSubTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
-
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue b/src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue
index 136ee589..bb0959b7 100644
--- a/src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue
+++ b/src/ui/components/FaContextMenu/context-menu/ContextMenuTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ContextMenuTriggerProps } from 'radix-vue'
-import { ContextMenuTrigger, useForwardProps } from 'radix-vue'
+import type { ContextMenuTriggerProps } from 'reka-ui'
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui'
 
 const props = defineProps<ContextMenuTriggerProps>()
 
diff --git a/src/ui/components/FaDrawer/sheet/Sheet.vue b/src/ui/components/FaDrawer/sheet/Sheet.vue
index 5f6a5632..ff50359d 100644
--- a/src/ui/components/FaDrawer/sheet/Sheet.vue
+++ b/src/ui/components/FaDrawer/sheet/Sheet.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/src/ui/components/FaDrawer/sheet/SheetClose.vue b/src/ui/components/FaDrawer/sheet/SheetClose.vue
index 1fa61805..e49c3591 100644
--- a/src/ui/components/FaDrawer/sheet/SheetClose.vue
+++ b/src/ui/components/FaDrawer/sheet/SheetClose.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue'
-import { DialogClose } from 'radix-vue'
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/src/ui/components/FaDrawer/sheet/SheetContent.vue b/src/ui/components/FaDrawer/sheet/SheetContent.vue
index 1c81e4d0..32c3f4a9 100644
--- a/src/ui/components/FaDrawer/sheet/SheetContent.vue
+++ b/src/ui/components/FaDrawer/sheet/SheetContent.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 { HTMLAttributes } from 'vue'
 import type { SheetVariants } from '.'
 import { cn } from '@/utils'
@@ -10,7 +10,7 @@ import {
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 import { sheetVariants } from '.'
 
diff --git a/src/ui/components/FaDrawer/sheet/SheetDescription.vue b/src/ui/components/FaDrawer/sheet/SheetDescription.vue
index 6ad23c98..23bb92ce 100644
--- a/src/ui/components/FaDrawer/sheet/SheetDescription.vue
+++ b/src/ui/components/FaDrawer/sheet/SheetDescription.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue'
+import type { DialogDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogDescription } from 'radix-vue'
+import { DialogDescription } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaDrawer/sheet/SheetTitle.vue b/src/ui/components/FaDrawer/sheet/SheetTitle.vue
index 8c3d6573..b1a13043 100644
--- a/src/ui/components/FaDrawer/sheet/SheetTitle.vue
+++ b/src/ui/components/FaDrawer/sheet/SheetTitle.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue'
+import type { DialogTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogTitle } from 'radix-vue'
+import { DialogTitle } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaDrawer/sheet/SheetTrigger.vue b/src/ui/components/FaDrawer/sheet/SheetTrigger.vue
new file mode 100644
index 00000000..4723d524
--- /dev/null
+++ b/src/ui/components/FaDrawer/sheet/SheetTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/src/ui/components/FaDrawer/sheet/index.ts b/src/ui/components/FaDrawer/sheet/index.ts
index f53771ec..71e66d0e 100644
--- a/src/ui/components/FaDrawer/sheet/index.ts
+++ b/src/ui/components/FaDrawer/sheet/index.ts
@@ -8,6 +8,7 @@ export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
 export { default as SheetHeader } from './SheetHeader.vue'
 export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
 
 export const sheetVariants = cva(
   'fixed z-2000 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:animate-duration-300 data-[state=open]:animate-duration-500',
@@ -17,9 +18,9 @@ export const sheetVariants = cva(
         top: 'inset-x-0 top-0 shadow-[0_1px_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
             'inset-x-0 bottom-0 shadow-[0_-1px_0_0_hsl(var(--border))] 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 shadow-[1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',
+        left: 'inset-y-0 left-0 h-full w-3/4 shadow-[1px_0_0_0_hsl(var(--border))] 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 shadow-[-1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md',
+            'inset-y-0 right-0 h-full w-3/4 shadow-[-1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
       },
     },
     defaultVariants: {
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenu.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenu.vue
index c9e77fe7..190c1894 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenu.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue'
-import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuCheckboxItem.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuCheckboxItem.vue
index 5781bf5e..36bfdd9e 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'radix-vue'
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
-
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuContent.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuContent.vue
index 9823bd23..c0881339 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuContent.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuContent.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'radix-vue'
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   DropdownMenuContent,
-
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = withDefaults(
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuGroup.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuGroup.vue
index e9711764..b5ac0db3 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuGroup.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuGroupProps } from 'radix-vue'
-import { DropdownMenuGroup } from 'radix-vue'
+import type { DropdownMenuGroupProps } from 'reka-ui'
+import { DropdownMenuGroup } from 'reka-ui'
 
 const props = defineProps<DropdownMenuGroupProps>()
 </script>
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuItem.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuItem.vue
index 5ab98d74..db9d2513 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuItem.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from 'radix-vue'
+import type { DropdownMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DropdownMenuItem, useForwardProps } from 'radix-vue'
+import { DropdownMenuItem, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuLabel.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuLabel.vue
index 4b7d8869..95d149ac 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuLabel.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuLabel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from 'radix-vue'
+import type { DropdownMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioGroup.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioGroup.vue
index c21b27a8..5c6ba949 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'radix-vue'
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
 import {
   DropdownMenuRadioGroup,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioItem.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioItem.vue
index 71df679b..c96525db 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'radix-vue'
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSeparator.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSeparator.vue
index 7a3fd274..dfaf3db0 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSeparator.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from 'radix-vue'
+import type { DropdownMenuSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   DropdownMenuSeparator,
-
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSub.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSub.vue
index af6bac43..f4080b32 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSub.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSub.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue'
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
 import {
   DropdownMenuSub,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 
 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubContent.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubContent.vue
index a8a6eaa5..e4147c31 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   DropdownMenuSubContent,
-
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubTrigger.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubTrigger.vue
index 1147cfd7..6c312f8f 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from 'radix-vue'
+import type { DropdownMenuSubTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
-
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuTrigger.vue b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuTrigger.vue
index baf0f7c0..d704f29c 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuTrigger.vue
+++ b/src/ui/components/FaDropdown/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from 'radix-vue'
-import { DropdownMenuTrigger, useForwardProps } from 'radix-vue'
+import type { DropdownMenuTriggerProps } from 'reka-ui'
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
 
 const props = defineProps<DropdownMenuTriggerProps>()
 
diff --git a/src/ui/components/FaDropdown/dropdown-menu/index.ts b/src/ui/components/FaDropdown/dropdown-menu/index.ts
index 6011f35c..f488d396 100644
--- a/src/ui/components/FaDropdown/dropdown-menu/index.ts
+++ b/src/ui/components/FaDropdown/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'
diff --git a/src/ui/components/FaDropdown/index.vue b/src/ui/components/FaDropdown/index.vue
index 46c15b2a..968c5605 100644
--- a/src/ui/components/FaDropdown/index.vue
+++ b/src/ui/components/FaDropdown/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DropdownMenuContentProps } from 'radix-vue'
+import type { DropdownMenuContentProps } from 'reka-ui'
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/src/ui/components/FaModal/dialog/Dialog.vue b/src/ui/components/FaModal/dialog/Dialog.vue
index 5f6a5632..ff50359d 100644
--- a/src/ui/components/FaModal/dialog/Dialog.vue
+++ b/src/ui/components/FaModal/dialog/Dialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/src/ui/components/FaModal/dialog/DialogClose.vue b/src/ui/components/FaModal/dialog/DialogClose.vue
index 1fa61805..e49c3591 100644
--- a/src/ui/components/FaModal/dialog/DialogClose.vue
+++ b/src/ui/components/FaModal/dialog/DialogClose.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue'
-import { DialogClose } from 'radix-vue'
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/src/ui/components/FaModal/dialog/DialogContent.vue b/src/ui/components/FaModal/dialog/DialogContent.vue
index 4f520857..1c8774d5 100644
--- a/src/ui/components/FaModal/dialog/DialogContent.vue
+++ b/src/ui/components/FaModal/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 { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { useScrollLock } from '@vueuse/core'
@@ -9,7 +9,7 @@ import {
   DialogContent,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogContentProps & {
diff --git a/src/ui/components/FaModal/dialog/DialogDescription.vue b/src/ui/components/FaModal/dialog/DialogDescription.vue
index dcae657f..e71ffa9b 100644
--- a/src/ui/components/FaModal/dialog/DialogDescription.vue
+++ b/src/ui/components/FaModal/dialog/DialogDescription.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue'
+import type { DialogDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogDescription, useForwardProps } from 'radix-vue'
+import { DialogDescription, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaModal/dialog/DialogScrollContent.vue b/src/ui/components/FaModal/dialog/DialogScrollContent.vue
new file mode 100644
index 00000000..cf1cfe66
--- /dev/null
+++ b/src/ui/components/FaModal/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid data-[state=closed]:animate-out data-[state=open]:animate-in place-items-center overflow-y-auto bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary"
+        >
+          <X class="h-4 w-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/src/ui/components/FaModal/dialog/DialogTitle.vue b/src/ui/components/FaModal/dialog/DialogTitle.vue
index ceeaf6fe..ab30cff9 100644
--- a/src/ui/components/FaModal/dialog/DialogTitle.vue
+++ b/src/ui/components/FaModal/dialog/DialogTitle.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue'
+import type { DialogTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { DialogTitle, useForwardProps } from 'radix-vue'
+import { DialogTitle, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaModal/dialog/DialogTrigger.vue b/src/ui/components/FaModal/dialog/DialogTrigger.vue
new file mode 100644
index 00000000..4723d524
--- /dev/null
+++ b/src/ui/components/FaModal/dialog/DialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/src/ui/components/FaModal/dialog/index.ts b/src/ui/components/FaModal/dialog/index.ts
index f4d24439..ca8cfeae 100644
--- a/src/ui/components/FaModal/dialog/index.ts
+++ b/src/ui/components/FaModal/dialog/index.ts
@@ -4,4 +4,6 @@ export { default as DialogContent } from './DialogContent.vue'
 export { default as DialogDescription } from './DialogDescription.vue'
 export { default as DialogFooter } from './DialogFooter.vue'
 export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
 export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
diff --git a/src/ui/components/FaModal/index.vue b/src/ui/components/FaModal/index.vue
index 8d79af44..9a80dcd9 100644
--- a/src/ui/components/FaModal/index.vue
+++ b/src/ui/components/FaModal/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ModalEmits, ModalProps } from '.'
 import { cn } from '@/utils'
-import { VisuallyHidden } from 'radix-vue'
+import { VisuallyHidden } from 'reka-ui'
 import {
   Dialog,
   DialogContent,
diff --git a/src/ui/components/FaNotification/toast/Toast.vue b/src/ui/components/FaNotification/toast/Toast.vue
index 59a58244..fd774e92 100644
--- a/src/ui/components/FaNotification/toast/Toast.vue
+++ b/src/ui/components/FaNotification/toast/Toast.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastRootEmits } from 'radix-vue'
+import type { ToastRootEmits } from 'reka-ui'
 import type { ToastProps } from '.'
 import { cn } from '@/utils'
-import { ToastRoot, useForwardPropsEmits } from 'radix-vue'
+import { ToastRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 import { toastVariants } from '.'
 
diff --git a/src/ui/components/FaNotification/toast/ToastAction.vue b/src/ui/components/FaNotification/toast/ToastAction.vue
index e2159e4a..d145344c 100644
--- a/src/ui/components/FaNotification/toast/ToastAction.vue
+++ b/src/ui/components/FaNotification/toast/ToastAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastActionProps } from 'radix-vue'
+import type { ToastActionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastAction } from 'radix-vue'
+import { ToastAction } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaNotification/toast/ToastClose.vue b/src/ui/components/FaNotification/toast/ToastClose.vue
index 60fffc9f..12d68659 100644
--- a/src/ui/components/FaNotification/toast/ToastClose.vue
+++ b/src/ui/components/FaNotification/toast/ToastClose.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { ToastCloseProps } from 'radix-vue'
+import type { ToastCloseProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { X } from 'lucide-vue-next'
-import { ToastClose } from 'radix-vue'
+import { ToastClose } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastCloseProps & {
diff --git a/src/ui/components/FaNotification/toast/ToastDescription.vue b/src/ui/components/FaNotification/toast/ToastDescription.vue
index d6050a87..3d9f05bd 100644
--- a/src/ui/components/FaNotification/toast/ToastDescription.vue
+++ b/src/ui/components/FaNotification/toast/ToastDescription.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastDescriptionProps } from 'radix-vue'
+import type { ToastDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastDescription } from 'radix-vue'
+import { ToastDescription } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaNotification/toast/ToastProvider.vue b/src/ui/components/FaNotification/toast/ToastProvider.vue
index 97674052..5c48a15d 100644
--- a/src/ui/components/FaNotification/toast/ToastProvider.vue
+++ b/src/ui/components/FaNotification/toast/ToastProvider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { ToastProviderProps } from 'radix-vue'
-import { ToastProvider } from 'radix-vue'
+import type { ToastProviderProps } from 'reka-ui'
+import { ToastProvider } from 'reka-ui'
 
 const props = defineProps<ToastProviderProps>()
 </script>
diff --git a/src/ui/components/FaNotification/toast/ToastTitle.vue b/src/ui/components/FaNotification/toast/ToastTitle.vue
index 2b61a5de..970035da 100644
--- a/src/ui/components/FaNotification/toast/ToastTitle.vue
+++ b/src/ui/components/FaNotification/toast/ToastTitle.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastTitleProps } from 'radix-vue'
+import type { ToastTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastTitle } from 'radix-vue'
+import { ToastTitle } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaNotification/toast/ToastViewport.vue b/src/ui/components/FaNotification/toast/ToastViewport.vue
index 233a9a0a..5660b0f2 100644
--- a/src/ui/components/FaNotification/toast/ToastViewport.vue
+++ b/src/ui/components/FaNotification/toast/ToastViewport.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ToastViewportProps } from 'radix-vue'
+import type { ToastViewportProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ToastViewport } from 'radix-vue'
+import { ToastViewport } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaNotification/toast/index.ts b/src/ui/components/FaNotification/toast/index.ts
index b9bc4bcc..8cc8551b 100644
--- a/src/ui/components/FaNotification/toast/index.ts
+++ b/src/ui/components/FaNotification/toast/index.ts
@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority'
-import type { ToastRootProps } from 'radix-vue'
+import type { ToastRootProps } from 'reka-ui'
 
 import type { HTMLAttributes } from 'vue'
 import { cva } from 'class-variance-authority'
@@ -15,7 +15,7 @@ export { default as ToastViewport } from './ToastViewport.vue'
 export { toast, useToast } from './use-toast'
 
 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 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-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
diff --git a/src/ui/components/FaPinInput/pin-input/PinInput.vue b/src/ui/components/FaPinInput/pin-input/PinInput.vue
index 498c8769..26cb228f 100644
--- a/src/ui/components/FaPinInput/pin-input/PinInput.vue
+++ b/src/ui/components/FaPinInput/pin-input/PinInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { PinInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue b/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue
index a2212f27..208111d1 100644
--- a/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue
+++ b/src/ui/components/FaPinInput/pin-input/PinInputGroup.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue'
+import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { Primitive, useForwardProps } from 'radix-vue'
+import { Primitive, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaPinInput/pin-input/PinInputInput.vue b/src/ui/components/FaPinInput/pin-input/PinInputInput.vue
index c0ed3467..a2afdb47 100644
--- a/src/ui/components/FaPinInput/pin-input/PinInputInput.vue
+++ b/src/ui/components/FaPinInput/pin-input/PinInputInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PinInputInputProps } from 'radix-vue'
+import type { PinInputInputProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { PinInputInput, useForwardProps } from 'radix-vue'
+import { PinInputInput, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue b/src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue
new file mode 100644
index 00000000..007c02ce
--- /dev/null
+++ b/src/ui/components/FaPinInput/pin-input/PinInputSeparator.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { Dot } from 'lucide-vue-next'
+import { Primitive, useForwardProps } from 'reka-ui'
+
+const props = defineProps<PrimitiveProps>()
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <Dot />
+    </slot>
+  </primitive>
+</template>
diff --git a/src/ui/components/FaPinInput/pin-input/index.ts b/src/ui/components/FaPinInput/pin-input/index.ts
index 5212711f..e645e414 100644
--- a/src/ui/components/FaPinInput/pin-input/index.ts
+++ b/src/ui/components/FaPinInput/pin-input/index.ts
@@ -1,3 +1,4 @@
 export { default as PinInput } from './PinInput.vue'
 export { default as PinInputGroup } from './PinInputGroup.vue'
 export { default as PinInputInput } from './PinInputInput.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
diff --git a/src/ui/components/FaPopover/index.vue b/src/ui/components/FaPopover/index.vue
index 935aae92..dff88e63 100644
--- a/src/ui/components/FaPopover/index.vue
+++ b/src/ui/components/FaPopover/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PopoverContentProps } from 'radix-vue'
+import type { PopoverContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import {
   Popover,
diff --git a/src/ui/components/FaPopover/popover/Popover.vue b/src/ui/components/FaPopover/popover/Popover.vue
index da5f7096..72e0b5fa 100644
--- a/src/ui/components/FaPopover/popover/Popover.vue
+++ b/src/ui/components/FaPopover/popover/Popover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
diff --git a/src/ui/components/FaPopover/popover/PopoverContent.vue b/src/ui/components/FaPopover/popover/PopoverContent.vue
index 25cd1ff9..296ee0e1 100644
--- a/src/ui/components/FaPopover/popover/PopoverContent.vue
+++ b/src/ui/components/FaPopover/popover/PopoverContent.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue'
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   PopoverContent,
-
   PopoverPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 defineOptions({
diff --git a/src/ui/components/FaPopover/popover/PopoverTrigger.vue b/src/ui/components/FaPopover/popover/PopoverTrigger.vue
index 6c944497..0195a096 100644
--- a/src/ui/components/FaPopover/popover/PopoverTrigger.vue
+++ b/src/ui/components/FaPopover/popover/PopoverTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from 'radix-vue'
-import { PopoverTrigger } from 'radix-vue'
+import type { PopoverTriggerProps } from 'reka-ui'
+import { PopoverTrigger } from 'reka-ui'
 
 const props = defineProps<PopoverTriggerProps>()
 </script>
diff --git a/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue b/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
index 11ca35df..478a6861 100644
--- a/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
+++ b/src/ui/components/FaScrollArea/scroll-area/ScrollArea.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from 'radix-vue'
+import type { ScrollAreaRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
-
   ScrollAreaViewport,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 import ScrollBar from './ScrollBar.vue'
 
diff --git a/src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue b/src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue
index f70d0140..d1d4856b 100644
--- a/src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue
+++ b/src/ui/components/FaScrollArea/scroll-area/ScrollBar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from 'radix-vue'
+import type { ScrollAreaScrollbarProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
diff --git a/src/ui/components/FaSelect/select/Select.vue b/src/ui/components/FaSelect/select/Select.vue
index adc42fdf..b9b1f331 100644
--- a/src/ui/components/FaSelect/select/Select.vue
+++ b/src/ui/components/FaSelect/select/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<SelectRootProps>()
 const emits = defineEmits<SelectRootEmits>()
diff --git a/src/ui/components/FaSelect/select/SelectContent.vue b/src/ui/components/FaSelect/select/SelectContent.vue
index de24a2d0..ddb93bba 100644
--- a/src/ui/components/FaSelect/select/SelectContent.vue
+++ b/src/ui/components/FaSelect/select/SelectContent.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   SelectContent,
-
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
 
@@ -45,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/src/ui/components/FaSelect/select/SelectGroup.vue b/src/ui/components/FaSelect/select/SelectGroup.vue
index 12300c72..b8dc60fb 100644
--- a/src/ui/components/FaSelect/select/SelectGroup.vue
+++ b/src/ui/components/FaSelect/select/SelectGroup.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from 'radix-vue'
+import type { SelectGroupProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { SelectGroup } from 'radix-vue'
+import { SelectGroup } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaSelect/select/SelectItem.vue b/src/ui/components/FaSelect/select/SelectItem.vue
index 9ec1b579..ff07cc8e 100644
--- a/src/ui/components/FaSelect/select/SelectItem.vue
+++ b/src/ui/components/FaSelect/select/SelectItem.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { SelectItemProps } from 'radix-vue'
+import type { SelectItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { Check } from 'lucide-vue-next'
 import {
   SelectItem,
   SelectItemIndicator,
-
   SelectItemText,
   useForwardProps,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaSelect/select/SelectItemText.vue b/src/ui/components/FaSelect/select/SelectItemText.vue
index a8db38b4..1cc7db1d 100644
--- a/src/ui/components/FaSelect/select/SelectItemText.vue
+++ b/src/ui/components/FaSelect/select/SelectItemText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectItemTextProps } from 'radix-vue'
-import { SelectItemText } from 'radix-vue'
+import type { SelectItemTextProps } from 'reka-ui'
+import { SelectItemText } from 'reka-ui'
 
 const props = defineProps<SelectItemTextProps>()
 </script>
diff --git a/src/ui/components/FaSelect/select/SelectLabel.vue b/src/ui/components/FaSelect/select/SelectLabel.vue
index 975e49c7..14f7b6e5 100644
--- a/src/ui/components/FaSelect/select/SelectLabel.vue
+++ b/src/ui/components/FaSelect/select/SelectLabel.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from 'radix-vue'
+import type { SelectLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { SelectLabel } from 'radix-vue'
+import { SelectLabel } from 'reka-ui'
 
 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 pe-8 ps-2 text-sm font-semibold', props.class)">
     <slot />
   </SelectLabel>
 </template>
diff --git a/src/ui/components/FaSelect/select/SelectScrollDownButton.vue b/src/ui/components/FaSelect/select/SelectScrollDownButton.vue
index dda5ee7c..020aa25f 100644
--- a/src/ui/components/FaSelect/select/SelectScrollDownButton.vue
+++ b/src/ui/components/FaSelect/select/SelectScrollDownButton.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { SelectScrollDownButtonProps } from 'radix-vue'
+import type { SelectScrollDownButtonProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaSelect/select/SelectScrollUpButton.vue b/src/ui/components/FaSelect/select/SelectScrollUpButton.vue
index f7b3287b..b411251d 100644
--- a/src/ui/components/FaSelect/select/SelectScrollUpButton.vue
+++ b/src/ui/components/FaSelect/select/SelectScrollUpButton.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { SelectScrollUpButtonProps } from 'radix-vue'
+import type { SelectScrollUpButtonProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronUp } from 'lucide-vue-next'
-import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaSelect/select/SelectSeparator.vue b/src/ui/components/FaSelect/select/SelectSeparator.vue
index 523d9e15..19c96ab2 100644
--- a/src/ui/components/FaSelect/select/SelectSeparator.vue
+++ b/src/ui/components/FaSelect/select/SelectSeparator.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from 'radix-vue'
+import type { SelectSeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { SelectSeparator } from 'radix-vue'
+import { SelectSeparator } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaSelect/select/SelectTrigger.vue b/src/ui/components/FaSelect/select/SelectTrigger.vue
index ff06a6c2..4fac4f6c 100644
--- a/src/ui/components/FaSelect/select/SelectTrigger.vue
+++ b/src/ui/components/FaSelect/select/SelectTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from 'radix-vue'
+import type { SelectTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import { ChevronDown } from 'lucide-vue-next'
-import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaSelect/select/SelectValue.vue b/src/ui/components/FaSelect/select/SelectValue.vue
index 6f37eb55..4ffa580c 100644
--- a/src/ui/components/FaSelect/select/SelectValue.vue
+++ b/src/ui/components/FaSelect/select/SelectValue.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectValueProps } from 'radix-vue'
-import { SelectValue } from 'radix-vue'
+import type { SelectValueProps } from 'reka-ui'
+import { SelectValue } from 'reka-ui'
 
 const props = defineProps<SelectValueProps>()
 </script>
diff --git a/src/ui/components/FaSwitch/switch/Switch.vue b/src/ui/components/FaSwitch/switch/Switch.vue
index b7271497..0062c6d8 100644
--- a/src/ui/components/FaSwitch/switch/Switch.vue
+++ b/src/ui/components/FaSwitch/switch/Switch.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue'
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
 import {
   SwitchRoot,
-
   SwitchThumb,
   useForwardPropsEmits,
-} from 'radix-vue'
+} from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaTabs/tabs/Tabs.vue b/src/ui/components/FaTabs/tabs/Tabs.vue
index 8feda3f7..15aeca8b 100644
--- a/src/ui/components/FaTabs/tabs/Tabs.vue
+++ b/src/ui/components/FaTabs/tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TabsRootProps>()
 const emits = defineEmits<TabsRootEmits>()
diff --git a/src/ui/components/FaTabs/tabs/TabsContent.vue b/src/ui/components/FaTabs/tabs/TabsContent.vue
index 8085a607..d75206ab 100644
--- a/src/ui/components/FaTabs/tabs/TabsContent.vue
+++ b/src/ui/components/FaTabs/tabs/TabsContent.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TabsContentProps } from 'radix-vue'
+import type { TabsContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TabsContent } from 'radix-vue'
+import { TabsContent } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaTabs/tabs/TabsList.vue b/src/ui/components/FaTabs/tabs/TabsList.vue
index d6ac51ee..cd43ec7d 100644
--- a/src/ui/components/FaTabs/tabs/TabsList.vue
+++ b/src/ui/components/FaTabs/tabs/TabsList.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TabsListProps } from 'radix-vue'
+import type { TabsListProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TabsList } from 'radix-vue'
+import { TabsList } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaTabs/tabs/TabsTrigger.vue b/src/ui/components/FaTabs/tabs/TabsTrigger.vue
index 199843e6..4d893a51 100644
--- a/src/ui/components/FaTabs/tabs/TabsTrigger.vue
+++ b/src/ui/components/FaTabs/tabs/TabsTrigger.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TabsTriggerProps } from 'radix-vue'
+import type { TabsTriggerProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TabsTrigger, useForwardProps } from 'radix-vue'
+import { TabsTrigger, useForwardProps } from 'reka-ui'
 import { computed } from 'vue'
 
 const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/components/FaToast/sonner/Sonner.vue b/src/ui/components/FaToast/sonner/Sonner.vue
index 9e50ef19..0d87f4bd 100644
--- a/src/ui/components/FaToast/sonner/Sonner.vue
+++ b/src/ui/components/FaToast/sonner/Sonner.vue
@@ -7,7 +7,7 @@ const props = defineProps<ToasterProps>()
 
 <template>
   <Sonner
-    class="group toaster"
+    class="toaster group"
     v-bind="props"
     :toast-options="{
       classes: {
diff --git a/src/ui/components/FaTooltip/index.vue b/src/ui/components/FaTooltip/index.vue
index c18f3220..1cc3f18a 100644
--- a/src/ui/components/FaTooltip/index.vue
+++ b/src/ui/components/FaTooltip/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TooltipContentProps, TooltipProviderProps } from 'radix-vue'
+import type { TooltipContentProps, TooltipProviderProps } from 'reka-ui'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
 
 defineOptions({
diff --git a/src/ui/components/FaTooltip/tooltip/Tooltip.vue b/src/ui/components/FaTooltip/tooltip/Tooltip.vue
index 3898c703..d5b3cd5b 100644
--- a/src/ui/components/FaTooltip/tooltip/Tooltip.vue
+++ b/src/ui/components/FaTooltip/tooltip/Tooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from 'radix-vue'
-import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
diff --git a/src/ui/components/FaTooltip/tooltip/TooltipContent.vue b/src/ui/components/FaTooltip/tooltip/TooltipContent.vue
index e8e030bf..3bc6c4d4 100644
--- a/src/ui/components/FaTooltip/tooltip/TooltipContent.vue
+++ b/src/ui/components/FaTooltip/tooltip/TooltipContent.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from 'radix-vue'
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
 import { computed } from 'vue'
 
 defineOptions({
diff --git a/src/ui/components/FaTooltip/tooltip/TooltipProvider.vue b/src/ui/components/FaTooltip/tooltip/TooltipProvider.vue
index 23244b18..f4457e4f 100644
--- a/src/ui/components/FaTooltip/tooltip/TooltipProvider.vue
+++ b/src/ui/components/FaTooltip/tooltip/TooltipProvider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipProviderProps } from 'radix-vue'
-import { TooltipProvider } from 'radix-vue'
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
 
 const props = defineProps<TooltipProviderProps>()
 </script>
diff --git a/src/ui/components/FaTooltip/tooltip/TooltipTrigger.vue b/src/ui/components/FaTooltip/tooltip/TooltipTrigger.vue
index 41acc5e9..266533ba 100644
--- a/src/ui/components/FaTooltip/tooltip/TooltipTrigger.vue
+++ b/src/ui/components/FaTooltip/tooltip/TooltipTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { TooltipTriggerProps } from 'radix-vue'
-import { TooltipTrigger } from 'radix-vue'
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
 
 const props = defineProps<TooltipTriggerProps>()
 </script>
diff --git a/src/ui/shadcn/ui/form/FormControl.vue b/src/ui/shadcn/ui/form/FormControl.vue
index 8459cab8..eddcafe7 100644
--- a/src/ui/shadcn/ui/form/FormControl.vue
+++ b/src/ui/shadcn/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'
 
 const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
diff --git a/src/ui/shadcn/ui/form/FormItem.vue b/src/ui/shadcn/ui/form/FormItem.vue
index ff39f80e..5affc2bf 100644
--- a/src/ui/shadcn/ui/form/FormItem.vue
+++ b/src/ui/shadcn/ui/form/FormItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { cn } from '@/utils'
-import { useId } from 'radix-vue'
+import { useId } from 'reka-ui'
 import { type HTMLAttributes, provide } from 'vue'
 import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
diff --git a/src/ui/shadcn/ui/form/FormLabel.vue b/src/ui/shadcn/ui/form/FormLabel.vue
index 082ef5ca..df9f0056 100644
--- a/src/ui/shadcn/ui/form/FormLabel.vue
+++ b/src/ui/shadcn/ui/form/FormLabel.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { LabelProps } from 'radix-vue'
+import type { LabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { Label } from '@/ui/shadcn/ui/label'
 import { cn } from '@/utils'
+import { Label } from '@/ui/shadcn/ui/label'
 import { useFormField } from './useFormField'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/src/ui/shadcn/ui/form/FormMessage.vue b/src/ui/shadcn/ui/form/FormMessage.vue
index 37ce26b4..308755e4 100644
--- a/src/ui/shadcn/ui/form/FormMessage.vue
+++ b/src/ui/shadcn/ui/form/FormMessage.vue
@@ -11,6 +11,6 @@ const { name, formMessageId } = useFormField()
     :id="formMessageId"
     as="p"
     :name="toValue(name)"
-    class="text-sm text-destructive font-medium"
+    class="text-sm font-medium text-destructive"
   />
 </template>
diff --git a/src/ui/shadcn/ui/form/useFormField.ts b/src/ui/shadcn/ui/form/useFormField.ts
index df056d5b..ed30a8a3 100644
--- a/src/ui/shadcn/ui/form/useFormField.ts
+++ b/src/ui/shadcn/ui/form/useFormField.ts
@@ -6,7 +6,8 @@ export function useFormField() {
   const fieldContext = inject(FieldContextKey)
   const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 
-  if (!fieldContext) { throw new Error('useFormField should be used within <FormField>') }
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
 
   const { name } = fieldContext
   const id = fieldItemContext
diff --git a/src/ui/shadcn/ui/label/Label.vue b/src/ui/shadcn/ui/label/Label.vue
index 395341a8..b7cc75d4 100644
--- a/src/ui/shadcn/ui/label/Label.vue
+++ b/src/ui/shadcn/ui/label/Label.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/utils'
-import { Label, type LabelProps } from 'radix-vue'
+import { Label, type LabelProps } from 'reka-ui'
 import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
diff --git a/tsconfig.app.json b/tsconfig.app.json
index ed707a31..d04eb803 100755
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,10 +3,10 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "baseUrl": "./",
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "#/*": ["src/types/*"]
+      "@/*": ["./src/*"],
+      "#/*": ["./src/types/*"]
     },
     "resolveJsonModule": true,
     "types": [
diff --git a/tsconfig.json b/tsconfig.json
index a2efd469..fd5f2edf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,11 @@
 {
+  // 此处配置是为了满足 shadcn-vue CLI 的配置要求
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }