diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index a0f5a04a..0d954fd1 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -1,5 +1,7 @@
 ---
 description: 'Learn how to customize the look and feel of the components.'
+navigation:
+  badge: 'New'
 ---
 
 ## Overview
diff --git a/docs/content/2.elements/3.avatar.md b/docs/content/2.elements/3.avatar.md
index e4b475d8..aceb6680 100644
--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
diff --git a/docs/content/2.elements/5.button.md b/docs/content/2.elements/5.button.md
index 0517d8b5..6f87b52b 100644
--- a/docs/content/2.elements/5.button.md
+++ b/docs/content/2.elements/5.button.md
@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
@@ -276,7 +278,7 @@ excludedProps:
 To stack buttons as a group, use the `ButtonGroup` component.
 
 - To size all the buttons equally, pass the `size` prop
-- To change the orientation of the buttons, set the `orientation` prop to `vertical`
+- To change the orientation of the buttons, set the `orientation` prop to `vertical` :u-badge{label="New" class="!rounded-full" variant="subtle"}
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
 ::component-card{slug="ButtonGroup"}
diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md
index 330f22c9..16c4314d 100644
--- a/docs/content/3.forms/10.form.md
+++ b/docs/content/3.forms/10.form.md
@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
@@ -232,7 +234,7 @@ async function submit (event: FormSubmitEvent<any>) {
 ```
 ::
 
-### Valibot
+### Valibot :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 ::component-example
 #default
diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md
index 14d67d12..044b1f98 100644
--- a/docs/content/5.navigation/4.tabs.md
+++ b/docs/content/5.navigation/4.tabs.md
@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md
index 21476648..e1eb5280 100644
--- a/docs/content/6.overlays/1.modal.md
+++ b/docs/content/6.overlays/1.modal.md
@@ -7,6 +7,8 @@ links:
   - label: 'Dialog'
     icon: i-simple-icons-headlessui
     to: 'https://headlessui.com/vue/dialog'
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
@@ -178,7 +180,7 @@ defineShortcuts({
 </script>
 ```
 
-### Fullscreen
+### Fullscreen :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 Set the `fullscreen` prop to `true` to enable it.