diff --git a/src/runtime/components/elements/Alert.vue b/src/runtime/components/elements/Alert.vue
index c6cb8366a5..7d86316247 100644
--- a/src/runtime/components/elements/Alert.vue
+++ b/src/runtime/components/elements/Alert.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="alertClass" v-bind="attrs">
-    <div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }">
+    <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
       <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts
index f633061b5f..72aa4fcf13 100644
--- a/src/runtime/ui.config.ts
+++ b/src/runtime/ui.config.ts
@@ -321,6 +321,7 @@ export const alert = {
   description: 'mt-1 text-sm leading-4 opacity-90',
   shadow: '',
   rounded: 'rounded-lg',
+  gap: 'gap-3',
   padding: 'p-3',
   icon: {
     base: 'flex-shrink-0 w-5 h-5'