diff --git a/bun.lockb b/bun.lockb
index 8f0cda26..67a662b9 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/content/Alert.vue b/components/content/Alert.vue
index 1af16d15..dd3f58bf 100644
--- a/components/content/Alert.vue
+++ b/components/content/Alert.vue
@@ -1,25 +1,32 @@
 <template>
-  <UiAlert class="[&:not(:first-child)]:mt-5" :class="[typeTwClass[type]]">
+  <UiAlert
+    class="[&:not(:first-child)]:mt-5 transition-all"
+    :class="[typeTwClass[type], to && 'cursor-pointer hover:bg-muted']"
+    @click="alertClick"
+  >
     <Icon v-if="icon && title" :name="icon" />
     <UiAlertTitle v-if="title" class="font-semibold">
       {{ title }}
     </UiAlertTitle>
     <UiAlertDescription>
       <div class="flex flex-row space-x-2">
-        <Icon v-if="icon && !title" :name="icon" class="self-center mb-[2px]" />
-        <span>
+        <Icon v-if="icon && !title" :name="icon" class="self-center mb-[2px] min-w-5" />
+        <span :class="[to && 'pr-3']">
           <slot />
         </span>
       </div>
+      <Icon v-if="to" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
     </UiAlertDescription>
   </UiAlert>
 </template>
 
 <script setup lang="ts">
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   title?: string;
   icon?: string;
   type?: 'info' | 'warning' | 'success' | 'danger';
+  to?: string;
+  target?: string;
 }>(), {
   type: 'info',
 });
@@ -30,4 +37,17 @@ const typeTwClass = {
   success: 'border-green-600 text-green-600 [&>svg]:text-green-600',
   danger: 'border-red-600 text-red-600 [&>svg]:text-red-600',
 };
+
+function alertClick() {
+  if (props.to) {
+    if (props.target) {
+      navigateTo(props.to, {
+        external: true,
+        open: { target: props.target },
+      });
+    } else {
+      navigateTo(props.to, { external: true });
+    }
+  }
+}
 </script>
diff --git a/components/content/Callout.vue b/components/content/Callout.vue
new file mode 100644
index 00000000..88af496b
--- /dev/null
+++ b/components/content/Callout.vue
@@ -0,0 +1,13 @@
+<template>
+  <Alert :icon="icon" :to="to" :target="target">
+    <slot />
+  </Alert>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon?: string;
+  to?: string;
+  target?: string;
+}>();
+</script>
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index 2ce864ce..a7c490ae 100644
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -50,8 +50,6 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue';
-import { ref } from 'vue';
 import type { BuiltinLanguage } from 'shiki';
 
 const props = defineProps({
diff --git a/content/1.getting-started/1.aaa.md b/content/1.getting-started/1.aaa.md
index a6975302..df40dd2b 100644
--- a/content/1.getting-started/1.aaa.md
+++ b/content/1.getting-started/1.aaa.md
@@ -18,6 +18,7 @@ This is only a **basic** *example* of what you can achieve with [Nuxt UI Pro](ht
 ---
 icon: i-heroicons-light-bulb
 title: Title
+to: https://ui.nuxt.com/pro/prose/callout
 ---
 Learn more on how to customize and structure a Nuxt UI Pro app!
 ::
@@ -34,8 +35,8 @@ Learn more on how to customize and structure a Nuxt UI Pro app!
 You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated.
 The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.
 
-::callout{icon="i-heroicons-light-bulb"}
-This template relies on a [catch-all route](https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route) but you can achieve the same thing with the [document-driven mode](https://content.nuxt.com/document-driven/introduction).
+::alert{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route" target="_blank" type="danger"}
+This template relies on a [catch-all route](https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route) but you can achieve the same thing with the [docu me n t driven mode](https://content.nuxt.com/document-driven/introduction).
 ::
 
 ## App Configuration
diff --git a/package.json b/package.json
index 0e99da8d..ed1266c4 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
+    "typecheck": "nuxt typecheck",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
@@ -32,7 +33,8 @@
     "@vueuse/core": "^10.9.0",
     "@vueuse/nuxt": "^10.9.0",
     "eslint": "9.2.0",
+    "lucide-vue-next": "^0.379.0",
     "shiki": "^1.6.0",
     "vue-tsc": "^2.0.19"
   }
-}
+}
\ No newline at end of file