diff --git a/docs/app/components/Banner.vue b/docs/app/components/Banner.vue
index 41465e3a..468c8258 100644
--- a/docs/app/components/Banner.vue
+++ b/docs/app/components/Banner.vue
@@ -1,5 +1,5 @@
 <template>
-  <UBanner icon="i-heroicons-wrench-screwdriver" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
+  <UBanner icon="i-heroicons-wrench-screwdriver" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]" :close="false">
     <template #title>
       You're looking at the documentation for <span class="font-semibold">Nuxt UI v3</span>!
     </template>
diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index 42199177..fb4ea04c 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -25,7 +25,7 @@ defineShortcuts({
       <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-[--ui-text-highlighted] min-w-0" aria-label="Nuxt UI">
         <Logo class="w-auto h-6 shrink-0" />
 
-        <UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded font-semibold inline-block truncate" />
+        <UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded-[--ui-radius] font-semibold inline-block truncate" />
       </NuxtLink>
     </template>
 
diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index 01d67555..dc67848c 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -219,9 +219,9 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
           <UFormField
             :label="option.label"
             size="sm"
-            class="inline-flex ring ring-[--ui-border-accented] rounded"
+            class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
             :ui="{
-              wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
+              wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
               label: 'text-[--ui-text-muted] px-2 py-1.5',
               container: 'mt-0'
             }"
@@ -233,7 +233,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
               value-key="value"
               color="neutral"
               variant="soft"
-              class="rounded rounded-l-none min-w-12"
+              class="rounded-[--ui-radius] rounded-l-none min-w-12"
               :search-input="false"
               :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
               :ui="{ itemLeadingChip: 'size-2' }"
@@ -256,7 +256,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
               :model-value="getComponentProp(option.name)"
               color="neutral"
               variant="soft"
-              :ui="{ base: 'rounded rounded-l-none min-w-12' }"
+              :ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
               @update:model-value="setComponentProp(option.name, $event)"
             />
           </UFormField>
diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 03a9bcce..7a0174f3 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -124,9 +124,9 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
             :label="option.label"
             :name="option.name"
             size="sm"
-            class="inline-flex ring ring-[--ui-border-accented] rounded"
+            class="inline-flex ring ring-[--ui-border-accented] rounded-[--ui-radius]"
             :ui="{
-              wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l flex border-r border-[--ui-border-accented]',
+              wrapper: 'bg-[--ui-bg-elevated]/50 rounded-l-[--ui-radius] flex border-r border-[--ui-border-accented]',
               label: 'text-[--ui-text-muted] px-2 py-1.5',
               container: 'mt-0'
             }"
@@ -139,7 +139,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
               :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
               color="neutral"
               variant="soft"
-              class="rounded rounded-l-none min-w-12"
+              class="rounded-[--ui-radius] rounded-l-none min-w-12"
               :multiple="option.multiple"
               :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
               :ui="{ itemLeadingChip: 'size-2' }"
@@ -160,7 +160,7 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
               :model-value="get(optionsValues, option.name)"
               color="neutral"
               variant="soft"
-              :ui="{ base: 'rounded rounded-l-none min-w-12' }"
+              :ui="{ base: 'rounded-[--ui-radius] rounded-l-none min-w-12' }"
               @update:model-value="set(optionsValues, option.name, $event)"
             />
           </UFormField>