diff --git a/docs/content/2.components/badge.md b/docs/content/2.components/badge.md
index 1e87cdad..03434b3b 100644
--- a/docs/content/2.components/badge.md
+++ b/docs/content/2.components/badge.md
@@ -8,7 +8,60 @@ links:
 
 ## Usage
 
-## Examples
+Use the default slot to set the label of the Badge.
+
+::component-code
+---
+slots:
+  default: Badge
+---
+
+Badge
+::
+
+You can achieve the same result by using the `label` prop.
+
+::component-code
+---
+props:
+  label: Badge
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the style of the Badge.
+
+::component-code
+---
+slots:
+  default: Badge
+props:
+  color: primary
+  variant: solid
+---
+
+Badge
+::
+
+::tip
+Try out the `gray` color for a neutral style.
+::
+
+### Size
+
+Use the `size` prop to change the size of the Badge.
+
+::component-code
+---
+slots:
+  default: Badge
+props:
+  size: md
+---
+
+Badge
+::
 
 ## API
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index a2c67213..b700d2a9 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -116,16 +116,11 @@ export default defineNuxtConfig({
   },
 
   hooks: {
-    // Related to https://github.com/nuxt/nuxt/pull/22558
-    // 'components:extend': (components) => {
-    //   components.forEach((component) => {
-    //     if (component.shortPath.includes('@nuxt/ui-pro')) {
-    //       component.global = true
-    //     } else if (component.global) {
-    //       component.global = 'sync'
-    //     }
-    //   })
-    // }
+    'components:extend': (components) => {
+      const globals = components.filter(c => ['UBadge'].includes(c.pascalName))
+
+      globals.forEach(c => c.global = 'sync')
+    }
   },
 
   // vite: {