diff --git a/components/content/Badge.vue b/components/content/Badge.vue
new file mode 100644
index 00000000..e96fad9f
--- /dev/null
+++ b/components/content/Badge.vue
@@ -0,0 +1,27 @@
+<template>
+  <NuxtLink :to="to" :target="target" class="mx-0.5">
+    <UiBadge :variant="variant" :class="typeTwClass[type]">
+      <ContentSlot :use="$slots.default" unwrap="p" />
+    </UiBadge>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  type?: 'default' | 'info' | 'warning' | 'success' | 'danger';
+  to?: string;
+  target?: string;
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+}>(), {
+  type: 'default',
+  variant: 'default',
+});
+
+const typeTwClass = {
+  default: '',
+  info: `${props.variant !== 'outline' && 'bg-sky-500 hover:bg-sky-600'} ${props.variant === 'outline' && 'border-sky-500 text-sky-500'}`,
+  warning: `${props.variant !== 'outline' && 'bg-amber-500 hover:bg-amber-600'} ${props.variant === 'outline' && 'border-amber-500 text-amber-500'}`,
+  success: `${props.variant !== 'outline' && 'bg-green-500 hover:bg-green-600'} ${props.variant === 'outline' && 'border-green-500 text-green-500'}`,
+  danger: `${props.variant !== 'outline' && 'bg-red-500 hover:bg-red-600'} ${props.variant === 'outline' && 'border-red-500 text-red-500'}`,
+};
+</script>
diff --git a/content/1.getting-started/3.writing/2.components.md b/content/1.getting-started/3.writing/2.components.md
index 2a5358c2..d512c2f3 100644
--- a/content/1.getting-started/3.writing/2.components.md
+++ b/content/1.getting-started/3.writing/2.components.md
@@ -7,6 +7,7 @@ icon: 'lucide:component'
 ## Docs Components
 
 ### Alert
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#alert"}
 
 ::code-group
   ::preview{filename="Preview"}
@@ -72,10 +73,14 @@ icon: 'lucide:component'
 
 ### Callout
 
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/callout"}
+
 `::callout` is an alias to `::alert`.
 
 ### Read More
 
+:badge[undocs]{variant="outline" to="https://undocs.pages.dev/guide/components#read-more"}
+
 ::code-group
   ::preview{filename="Preview"}
     :read-more{to="/getting-started/writing/markdown"}
@@ -88,8 +93,49 @@ icon: 'lucide:component'
   ```
 ::
 
+### Badge
+
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#badge"}
+
+::code-group
+  ::preview{filename="Preview"}
+    ::badge
+      Default
+    ::
+    ::badge{type="info"}
+      Info
+    ::
+    :badge[Warning]{type="warning"}
+    :badge[Danger]{type="danger"}
+    :badge[Outline]{variant="outline"}
+    :badge[Secondary]{variant="secondary"}
+    ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+      Link
+    ::
+  ::
+
+  ```md [Code]
+  ::badge
+    Default
+  ::
+  ::badge{type="info"}
+    Info
+  ::
+  :badge[Warning]{type="warning"}
+  :badge[Danger]{type="danger"}
+  :badge[Outline]{variant="outline"}
+  :badge[Secondary]{variant="secondary"}
+  ::badge{variant="outline" type="info" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
+    Link
+  ::
+  ```
+::
+
 ### Code Group
 
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#codegroup"}
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/code-group"}
+
 ::code-group
   ::preview{filename="Preview"}
     ::code-group