diff --git a/packages/components/src/basic/badge/badge/index.ts b/packages/components/src/basic/badge/badge/index.ts
index 8f26fc38..0f174b01 100644
--- a/packages/components/src/basic/badge/badge/index.ts
+++ b/packages/components/src/basic/badge/badge/index.ts
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
 export { default as Badge } from './Badge.vue'
 
 export const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
   {
     variants: {
       variant: {
diff --git a/packages/components/src/basic/button/button/index.ts b/packages/components/src/basic/button/button/index.ts
index af04afc4..17013eed 100644
--- a/packages/components/src/basic/button/button/index.ts
+++ b/packages/components/src/basic/button/button/index.ts
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
     variants: {
       variant: {
diff --git a/packages/components/src/basic/checkbox/CheckboxGroup.vue b/packages/components/src/basic/checkbox/CheckboxGroup.vue
index c44592bf..85e7ef87 100755
--- a/packages/components/src/basic/checkbox/CheckboxGroup.vue
+++ b/packages/components/src/basic/checkbox/CheckboxGroup.vue
@@ -158,7 +158,7 @@ function handleCustomOptionKeydown(option: TOption) {
         cn(
           'flex gap-2',
           option.description ? 'items-start' : 'items-center',
-          slots.option && 'outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-xl',
+          slots.option && 'outline-none focus-visible:ring-ring/50 focus-visible:ring-3 rounded-xl',
           props.optionClass,
         )
       "
diff --git a/packages/components/src/basic/checkbox/checkbox/Checkbox.vue b/packages/components/src/basic/checkbox/checkbox/Checkbox.vue
index feb0c627..61152ee8 100644
--- a/packages/components/src/basic/checkbox/checkbox/Checkbox.vue
+++ b/packages/components/src/basic/checkbox/checkbox/Checkbox.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="checkbox"
     v-bind="forwarded"
     :class="
-      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50', props.class)"
   >
     <CheckboxIndicator
       data-slot="checkbox-indicator"
diff --git a/packages/components/src/basic/input-otp/input-otp/InputOTPSlot.vue b/packages/components/src/basic/input-otp/input-otp/InputOTPSlot.vue
index ca7bbc7d..12fc348a 100644
--- a/packages/components/src/basic/input-otp/input-otp/InputOTPSlot.vue
+++ b/packages/components/src/basic/input-otp/input-otp/InputOTPSlot.vue
@@ -22,7 +22,7 @@ const slot = computed(() => context?.value.slots[props.index])
     v-bind="forwarded"
     data-slot="input-otp-slot"
     :data-active="slot?.isActive"
-    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-ss-md first:rounded-es-md first:border-s last:rounded-se-md last:rounded-ee-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-ss-md first:rounded-es-md first:border-s last:rounded-se-md last:rounded-ee-md data-[active=true]:z-10 data-[active=true]:ring-3', props.class)"
   >
     {{ slot?.char }}
     <div v-if="slot?.hasFakeCaret" class="flex pointer-events-none items-center inset-0 justify-center absolute">
diff --git a/packages/components/src/basic/input/index.vue b/packages/components/src/basic/input/index.vue
index 52aa0d6c..0d2fa451 100644
--- a/packages/components/src/basic/input/index.vue
+++ b/packages/components/src/basic/input/index.vue
@@ -60,7 +60,7 @@ defineExpose({
       v-bind="{
         ...omit(props, ['type', 'align', 'clearable', 'class', 'inputClass', 'startClass', 'endClass']),
         type,
-        class: cn('w-full flex-1 border-0 rounded-none bg-transparent ring-offset-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent', props.inputClass),
+        class: cn('w-full flex-1 border-0 rounded-none bg-transparent shadow-none ring-offset-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent', props.inputClass),
         ...$attrs,
       }"
       ref="inputRef"
diff --git a/packages/components/src/basic/input/input-group/InputGroup.vue b/packages/components/src/basic/input/input-group/InputGroup.vue
index a595b15c..66c1346f 100644
--- a/packages/components/src/basic/input/input-group/InputGroup.vue
+++ b/packages/components/src/basic/input/input-group/InputGroup.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
       'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
 
       // Focus state.
-      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3',
 
       // Error state.
       'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
diff --git a/packages/components/src/basic/input/input/Input.vue b/packages/components/src/basic/input/input/Input.vue
index 76cae548..1c137a38 100644
--- a/packages/components/src/basic/input/input/Input.vue
+++ b/packages/components/src/basic/input/input/Input.vue
@@ -33,7 +33,7 @@ defineExpose({
     data-slot="input"
     :class="cn(
       'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       props.class,
     )"
diff --git a/packages/components/src/basic/radio-group/radio-group/RadioGroupItem.vue b/packages/components/src/basic/radio-group/radio-group/RadioGroupItem.vue
index 3669b928..b06f7afd 100644
--- a/packages/components/src/basic/radio-group/radio-group/RadioGroupItem.vue
+++ b/packages/components/src/basic/radio-group/radio-group/RadioGroupItem.vue
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/components/src/basic/scroll-area/scroll-area/ScrollArea.vue b/packages/components/src/basic/scroll-area/scroll-area/ScrollArea.vue
index fd25988d..90d2d6a8 100644
--- a/packages/components/src/basic/scroll-area/scroll-area/ScrollArea.vue
+++ b/packages/components/src/basic/scroll-area/scroll-area/ScrollArea.vue
@@ -55,7 +55,7 @@ defineExpose({
     <ScrollAreaViewport
       ref="viewportRef"
       data-slot="scroll-area-viewport"
-      class="scroll-area-viewport outline-none rounded-[inherit] size-full transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      class="scroll-area-viewport outline-none rounded-[inherit] size-full transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-3 focus-visible:ring-ring/50"
       :class="{
         'scroll-area-mask-vertical': props.mask && !props.horizontal,
         'scroll-area-mask-horizontal': props.mask && props.horizontal,
diff --git a/packages/components/src/basic/select/select/SelectTrigger.vue b/packages/components/src/basic/select/select/SelectTrigger.vue
index 61fa0732..9dad664f 100644
--- a/packages/components/src/basic/select/select/SelectTrigger.vue
+++ b/packages/components/src/basic/select/select/SelectTrigger.vue
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-size="size"
     v-bind="forwardedProps"
     :class="cn(
-      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=text-])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=text-])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
       props.class,
     )"
   >
diff --git a/packages/components/src/basic/switch/switch/Switch.vue b/packages/components/src/basic/switch/switch/Switch.vue
index d521ed42..b1981afa 100644
--- a/packages/components/src/basic/switch/switch/Switch.vue
+++ b/packages/components/src/basic/switch/switch/Switch.vue
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="switch"
     v-bind="forwarded"
     :class="cn(
-      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
       props.class,
     )"
   >
diff --git a/packages/components/src/basic/tabs/tabs/TabsTrigger.vue b/packages/components/src/basic/tabs/tabs/TabsTrigger.vue
index c899d75c..e693b806 100644
--- a/packages/components/src/basic/tabs/tabs/TabsTrigger.vue
+++ b/packages/components/src/basic/tabs/tabs/TabsTrigger.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     data-slot="tabs-trigger"
     :class="cn(
-      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+      'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
       props.class,
     )"
     v-bind="forwardedProps"
diff --git a/packages/components/src/basic/textarea/input-group/InputGroup.vue b/packages/components/src/basic/textarea/input-group/InputGroup.vue
index dbe70654..f1964a3f 100644
--- a/packages/components/src/basic/textarea/input-group/InputGroup.vue
+++ b/packages/components/src/basic/textarea/input-group/InputGroup.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
       'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
 
       // Focus state.
-      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3',
 
       // Error state.
       'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
diff --git a/packages/components/src/basic/textarea/textarea/Textarea.vue b/packages/components/src/basic/textarea/textarea/Textarea.vue
index 6e02b2ec..d42f9ecf 100644
--- a/packages/components/src/basic/textarea/textarea/Textarea.vue
+++ b/packages/components/src/basic/textarea/textarea/Textarea.vue
@@ -23,6 +23,6 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   <textarea
     v-model="modelValue"
     data-slot="textarea"
-    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
   />
 </template>