diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index ef65d4352c..7805065463 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -3,6 +3,7 @@ import { upperName } from '../utils'
 const components = [
   'accordion',
   'alert',
+  'alert-group',
   'auth-form',
   'avatar',
   'badge',
diff --git a/playgrounds/nuxt/app/pages/components/alert-group.vue b/playgrounds/nuxt/app/pages/components/alert-group.vue
new file mode 100644
index 0000000000..b397ed4073
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/alert-group.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { AlertProps } from '@nuxt/ui'
+import { reactive } from 'vue'
+
+const alertItems: AlertProps[] = [
+  {
+    title: 'First Alert',
+    description: 'This is the first alert in the group.',
+    icon: 'i-lucide-info',
+    color: 'primary'
+  },
+  {
+    title: 'Second Alert',
+    description: 'This is the second alert in the group. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer ac sem euismod, dictum erat at, dictum enim. Etiam euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque.',
+    icon: 'i-lucide-alert-triangle',
+    color: 'warning'
+  },
+  {
+    title: 'Third Alert',
+    description: 'This is the third alert in the group.',
+    icon: 'i-lucide-check-circle',
+    color: 'success'
+  },
+  {
+    title: 'Fourth Alert',
+    description: 'This is the fourth alert in the group.',
+    icon: 'i-lucide-x-circle',
+    color: 'error'
+  },
+  {
+    title: 'Fifth Alert',
+    description: 'This is the fifth alert in the group.',
+    icon: 'i-lucide-help-circle',
+    color: 'info'
+  }
+]
+
+const attrs = reactive<Record<string, any>>({
+  expand: [false],
+  max: [5]
+})
+</script>
+
+<template>
+  <Navbar>
+    <UCheckbox v-model="attrs.expand[0]" label="Expand" />
+    <UInputNumber v-model="attrs.max[0]" :min="1" :max="10" label="Max" />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs" container-class="max-w-196">
+    <UAlertGroup :items="alertItems" v-bind="props" />
+  </Matrix>
+</template>
diff --git a/src/runtime/components/AlertGroup.vue b/src/runtime/components/AlertGroup.vue
new file mode 100644
index 0000000000..e326471ce2
--- /dev/null
+++ b/src/runtime/components/AlertGroup.vue
@@ -0,0 +1,71 @@
+<script lang="ts">
+import theme from '#build/ui/alert-group'
+import type { AppConfig } from '@nuxt/schema'
+import type { AlertProps } from '@nuxt/ui'
+import type { ComponentConfig } from '../types/tv'
+
+type AlertGroup = ComponentConfig<typeof theme, AppConfig, 'alertGroup'>
+
+export interface AlertGroupProps {
+  items: AlertProps[]
+  /**
+   * @defaultValue false
+   */
+  expand?: boolean
+  /**
+   * @defaultValue 5
+   */
+  max?: number
+  class?: any
+  ui?: AlertGroup['slots']
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useAppConfig } from '#imports'
+import { useComponentUI } from '../composables/useComponentUI'
+import { tv } from '../utils/tv'
+
+const props = withDefaults(defineProps<AlertGroupProps>(), {
+  expand: false,
+  max: 5
+})
+
+const appConfig = useAppConfig() as AlertGroup['AppConfig']
+const uiProp = useComponentUI('alertGroup', props)
+
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alertGroup || {}) })({}))
+
+const hovered = ref(false)
+const expanded = computed(() => props.expand || hovered.value)
+</script>
+
+<template>
+  <div
+    :data-expanded="expanded"
+    data-slot="root"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+    @focusin="hovered = true"
+    @focusout="hovered = false"
+  >
+    <UAlert
+      v-for="(item, index) in props.items"
+      :key="`alert-${index}`"
+      v-bind="item"
+      :tabindex="0"
+      :data-expanded="expanded"
+      :data-front="index === 0"
+      :class="ui.items({ class: [uiProp?.items, props.class] })"
+      :style="{
+        width: expanded ? '100%' : `${Math.max(0, 100 - index * 3)}%`,
+        marginTop: expanded || index === 0 ? '0' : (index >= props.max ? '-51px' : '-33px'),
+        zIndex: props.items.length - index,
+        maxHeight: !expanded && index !== 0 ? '51px' : undefined
+      }"
+    />
+  </div>
+</template>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 0693603371..41e29ced2b 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -1,5 +1,6 @@
 export * from '../components/Accordion.vue'
 export * from '../components/Alert.vue'
+export * from '../components/AlertGroup.vue'
 export * from '../components/App.vue'
 export * from '../components/AuthForm.vue'
 export * from '../components/Avatar.vue'
diff --git a/src/theme/alert-group.ts b/src/theme/alert-group.ts
new file mode 100644
index 0000000000..09350ad470
--- /dev/null
+++ b/src/theme/alert-group.ts
@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    root: 'group flex flex-col transition-all duration-300 data-[expanded=true]:gap-2 data-[expanded=false]:gap-0',
+    items: 'transition-all duration-300 mx-auto overflow-hidden not-first:group-data-[expanded=false]:*:invisible'
+  }
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 687acd97db..c54b7232c5 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,5 +1,6 @@
 export { default as accordion } from './accordion'
 export { default as alert } from './alert'
+export { default as alertGroup } from './alert-group'
 export { default as authForm } from './auth-form'
 export { default as avatar } from './avatar'
 export { default as avatarGroup } from './avatar-group'