diff --git a/docs/app/components/BadgeGenerator.vue b/docs/app/components/BadgeGenerator.vue
new file mode 100644
index 0000000000..8d36371233
--- /dev/null
+++ b/docs/app/components/BadgeGenerator.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { useClipboard } from '@vueuse/core'
+
+const pkg = useState('badge-pkg', () => 'nuxt')
+const type = useState<BadgeType>('badge-type', () => 'version')
+const isValid = ref(true)
+
+const { copy, copied } = useClipboard({ copiedDuring: 2000 })
+
+watch([pkg, type], () => {
+  isValid.value = true
+})
+
+const copyToClipboard = async () => {
+  const markdown = `[![Open on npmx.dev](https://npmx.dev/api/registry/badge/${type.value}/${pkg.value})](https://npmx.dev/package/${pkg.value})`
+  copy(markdown)
+}
+</script>
+
+<template>
+  <div
+    class="my-8 p-5 rounded-xl border border-gray-200/60 dark:border-white/5 bg-gray-50/50 dark:bg-white/2 flex flex-col sm:flex-row items-end gap-4"
+  >
+    <div class="flex flex-col gap-1.5 flex-1 w-full">
+      <label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
+        >Package Name</label
+      >
+      <input
+        v-model="pkg"
+        type="text"
+        spellcheck="false"
+        class="w-full h-10.5 px-4 py-2 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none text-sm transition-all"
+        :class="{ 'border-red-500/50 focus:ring-red-500/10 focus:border-red-500': !isValid }"
+        placeholder="e.g. nuxt"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1.5 flex-1 w-full">
+      <label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
+        >Badge Type</label
+      >
+      <div class="relative">
+        <select
+          v-model="type"
+          class="w-full h-10.5 px-4 py-2 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none text-sm transition-all appearance-none cursor-pointer"
+        >
+          <option v-for="t in BADGE_TYPES" :key="t" :value="t" class="dark:bg-gray-900">
+            {{ titleCase(t) }}
+          </option>
+        </select>
+        <span
+          class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5 flex-2 w-full">
+      <label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
+        >Preview & Action</label
+      >
+      <div
+        class="flex items-center bg-white dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-lg h-10.5 overflow-hidden"
+      >
+        <div
+          class="flex-1 flex items-center justify-center px-3 border-r border-gray-200 dark:border-white/10 h-full bg-gray-50/50 dark:bg-transparent"
+        >
+          <img
+            v-if="isValid"
+            :src="`https://npmx.dev/api/registry/badge/${type}/${pkg}`"
+            class="h-5"
+            alt="Badge Preview"
+            @error="isValid = false"
+          />
+          <span v-else class="text-[10px] font-bold text-red-500 uppercase tracking-tighter"
+            >Invalid</span
+          >
+        </div>
+
+        <button
+          @click="copyToClipboard"
+          :disabled="!isValid || !pkg"
+          class="px-4 h-full text-[11px] font-bold uppercase tracking-widest transition-all disabled:opacity-20 disabled:cursor-not-allowed min-w-21.25 hover:bg-gray-50 dark:hover:bg-white/5"
+          :class="
+            copied
+              ? 'text-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/10'
+              : 'text-gray-500 dark:text-gray-400'
+          "
+        >
+          {{ copied ? 'Done!' : 'Copy' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/BadgeGeneratorParameters.vue b/docs/app/components/BadgeGeneratorParameters.vue
new file mode 100644
index 0000000000..aa1b931dd9
--- /dev/null
+++ b/docs/app/components/BadgeGeneratorParameters.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import { useClipboard } from '@vueuse/core'
+
+const pkg = useState('badge-pkg', () => 'nuxt')
+const type = useState<BadgeType>('badge-type', () => 'version')
+const isValid = ref(true)
+
+const { copy, copied } = useClipboard({ copiedDuring: 2000 })
+
+const labelColor = useState('badge-label-color', () => '')
+const labelText = useState('badge-label-text', () => '')
+const badgeValue = useState('badge-value', () => '')
+const badgeColor = useState('badge-color', () => '')
+const usePkgName = useState('badge-use-name', () => false)
+const badgeStyle = useState('badge-style', () => 'default')
+
+const styles = ['default', 'shieldsio']
+
+const validateHex = (hex: string) => {
+  if (!hex) return true
+  const clean = hex.replace('#', '')
+  return /^[0-9A-F]{3}$/i.test(clean) || /^[0-9A-F]{6}$/i.test(clean)
+}
+
+const isLabelHexValid = computed(() => validateHex(labelColor.value))
+const isBadgeHexValid = computed(() => validateHex(badgeColor.value))
+const isInputValid = computed(
+  () => isLabelHexValid.value && isBadgeHexValid.value && pkg.value.length > 0,
+)
+
+const cleanHex = (hex: string) => hex?.replace('#', '') || ''
+
+const queryParams = computed(() => {
+  if (!isInputValid.value) return ''
+  const params = new URLSearchParams()
+
+  if (labelColor.value) params.append('labelColor', cleanHex(labelColor.value))
+  if (badgeColor.value) params.append('color', cleanHex(badgeColor.value))
+  if (badgeStyle.value !== 'default') params.append('style', badgeStyle.value)
+  if (badgeValue.value) params.append('value', badgeValue.value)
+
+  if (usePkgName.value) {
+    params.append('name', 'true')
+  } else if (labelText.value) {
+    params.append('label', labelText.value)
+  }
+
+  const queryString = params.toString()
+  return queryString ? `?${queryString}` : ''
+})
+
+const badgeUrl = computed(() => {
+  if (!isInputValid.value) return ''
+  return `https://npmx.dev/api/registry/badge/${type.value}/${pkg.value}${queryParams.value}`
+})
+
+watch([pkg, type, queryParams], () => {
+  isValid.value = true
+})
+
+const copyToClipboard = async () => {
+  const markdown = `[![Open on npmx.dev](${badgeUrl.value})](https://npmx.dev/package/${pkg.value})`
+  copy(markdown)
+}
+</script>
+
+<template>
+  <div
+    class="my-8 p-5 rounded-xl border border-gray-200/60 dark:border-white/5 bg-gray-50/50 dark:bg-white/2 flex flex-col gap-6"
+  >
+    <div class="flex flex-col lg:flex-row items-end gap-4">
+      <div class="flex flex-col gap-1.5 flex-1 w-full">
+        <label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
+          >Package Name</label
+        >
+        <input
+          v-model="pkg"
+          type="text"
+          placeholder="e.g. nuxt"
+          class="w-full h-10.5 px-4 py-2 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none text-sm transition-all"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1.5 flex-1 w-full">
+        <label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
+          >Badge Type</label
+        >
+        <div class="relative">
+          <select
+            v-model="type"
+            class="w-full h-10.5 px-4 py-2 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 outline-none text-sm transition-all appearance-none cursor-pointer"
+          >
+            <option v-for="t in BADGE_TYPES" :key="t" :value="t" class="dark:bg-gray-900">
+              {{ titleCase(t) }}
+            </option>
+          </select>
+          <span
+            class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1.5 flex-2 w-full">
+        <label class="text-[11px] font-bold uppercase tracking-wider text-gray-400 ml-1"
+          >Preview & Action</label
+        >
+        <div
+          class="flex items-center bg-white dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-lg h-10.5 overflow-hidden"
+        >
+          <div
+            class="flex-1 flex items-center justify-center px-3 border-r border-gray-200 dark:border-white/10 h-full bg-gray-50/10 dark:bg-transparent"
+          >
+            <img
+              v-if="isValid && isInputValid"
+              :src="badgeUrl"
+              class="h-5"
+              alt="Badge Preview"
+              @error="isValid = false"
+            />
+            <span v-else class="text-[10px] font-bold text-red-500 uppercase tracking-tighter">
+              {{ !isInputValid ? 'Invalid Parameters' : 'Not Found' }}
+            </span>
+          </div>
+          <button
+            @click="copyToClipboard"
+            :disabled="!isValid || !isInputValid || !pkg"
+            class="px-6 h-full text-[11px] font-bold uppercase tracking-widest transition-all disabled:opacity-20 disabled:cursor-not-allowed min-w-24 hover:bg-gray-50 dark:hover:bg-white/5"
+            :class="
+              copied
+                ? 'text-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/10'
+                : 'text-gray-500 dark:text-gray-400'
+            "
+          >
+            {{ copied ? 'Done!' : 'Copy' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="h-px bg-gray-200 dark:bg-white/5 w-full" />
+
+    <div class="grid grid-cols-1 sm:grid-cols-4 gap-6">
+      <div class="flex flex-col gap-1.5">
+        <label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Label Text</label>
+        <div class="relative group">
+          <input
+            v-model="labelText"
+            :disabled="usePkgName"
+            type="text"
+            placeholder="Custom Label"
+            class="w-full px-3 py-2 h-9 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 text-xs outline-none focus:border-emerald-500 disabled:cursor-not-allowed transition-all"
+            :class="{ 'opacity-50 grayscale pl-3': usePkgName }"
+          />
+
+          <transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+          >
+            <div
+              v-if="usePkgName"
+              class="absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none"
+            >
+              <span
+                class="flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-emerald-500/10 dark:bg-emerald-500/20 text-emerald-500 text-[9px] font-bold uppercase tracking-tighter border border-emerald-500/20"
+              >
+                Auto
+              </span>
+            </div>
+          </transition>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Badge Value</label>
+        <input
+          v-model="badgeValue"
+          type="text"
+          placeholder="Override Value"
+          class="px-3 py-2 h-9 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 text-xs outline-none focus:border-emerald-500 transition-all"
+        />
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Label Color</label>
+        <div
+          class="flex items-center px-3 rounded-lg border bg-white dark:bg-black/20 transition-all"
+          :class="
+            isLabelHexValid
+              ? 'border-gray-200 dark:border-white/10 focus-within:border-emerald-500'
+              : 'border-red-500 ring-1 ring-red-500/20'
+          "
+        >
+          <span class="text-gray-400 text-xs font-mono mr-1">#</span>
+          <input
+            v-model="labelColor"
+            type="text"
+            placeholder="0a0a0a"
+            class="w-full py-2 bg-transparent text-xs outline-none"
+          />
+          <span
+            v-if="!isLabelHexValid"
+            class="i-lucide-alert-circle w-3.5 h-3.5 text-red-500 ml-1"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        <label class="text-[10px] font-bold uppercase text-gray-400 ml-1">Badge Color</label>
+        <div
+          class="flex items-center px-3 rounded-lg border bg-white dark:bg-black/20 transition-all"
+          :class="
+            isBadgeHexValid
+              ? 'border-gray-200 dark:border-white/10 focus-within:border-emerald-500'
+              : 'border-red-500 ring-1 ring-red-500/20'
+          "
+        >
+          <span class="text-gray-400 text-xs font-mono mr-1">#</span>
+          <input
+            v-model="badgeColor"
+            type="text"
+            placeholder="ff69b4"
+            class="w-full py-2 bg-transparent text-xs outline-none"
+          />
+          <span
+            v-if="!isBadgeHexValid"
+            class="i-lucide-alert-circle w-3.5 h-3.5 text-red-500 ml-1"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-4 border-t border-gray-200/50 dark:border-white/5"
+    >
+      <label class="relative inline-flex items-center cursor-pointer group">
+        <input v-model="usePkgName" type="checkbox" class="sr-only peer" />
+        <div
+          class="w-9 h-5 bg-gray-200 peer-focus:outline-none dark:bg-white/10 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-emerald-500 rounded-full"
+        ></div>
+        <span
+          class="ml-3 text-[10px] font-bold uppercase text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors"
+          >Use package name as label</span
+        >
+      </label>
+
+      <div class="flex items-center gap-3">
+        <label class="text-[10px] font-bold uppercase text-gray-400 whitespace-nowrap"
+          >Badge Style</label
+        >
+        <select
+          v-model="badgeStyle"
+          class="min-w-30 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-black/20 text-xs outline-none cursor-pointer hover:border-emerald-500 transition-colors"
+        >
+          <option v-for="s in styles" :key="s" :value="s">{{ s }}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
index 75e8decb24..d15505da57 100644
--- a/docs/content/2.guide/1.features.md
+++ b/docs/content/2.guide/1.features.md
@@ -88,117 +88,3 @@ Quick access to online development environments detected from package READMEs:
 | :icon{name="i-lucide:pen-tool"} [CodePen](https://codepen.io)                  | Social development environment for front-end |
 | :icon{name="i-simple-icons-jsfiddle"} [JSFiddle](https://jsfiddle.net)         | Online editor for web snippets               |
 | :icon{name="i-simple-icons-replit"} [Replit](https://replit.com)               | Collaborative browser-based IDE              |
-
-### Custom badges
-
-You can add custom npmx badges to your markdown files using the following syntax:
-
-```md
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/TYPE/YOUR_PACKAGE)](https://npmx.dev/package/YOUR_PACKAGE)
-```
-
-::tip
-Make sure to replace `TYPE` with one of the options listed below and `YOUR_PACKAGE` with the actual package name (e.g., `vue`, `lodash`, or `@nuxt/kit`).
-::
-
-#### Available Badge Types
-
-- **version**: Shows the latest or specific version of the package. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
-- **license**: Displays the package license (e.g., MIT, Apache-2.0). :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"}
-- **size**: Shows the install size (via Bundlephobia) or unpacked size. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
-- **downloads**: Displays monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
-- **downloads-day**: Displays daily download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
-- **downloads-week**: Displays weekly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
-- **downloads-month**: Alias for monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
-- **downloads-year**: Displays yearly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
-- **vulnerabilities**: Shows the number of vulnerabilities found via OSV. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
-- **dependencies**: Lists the total count of package dependencies. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
-- **created**: Displays the date the package was first published. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
-- **updated**: Displays the date of the most recent modification. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
-- **engines**: Shows the supported Node.js version range. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
-- **types**: Indicates if TypeScript types are included. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
-- **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
-- **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
-- **quality**: NPMS.io quality score based on linting and tests. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
-- **popularity**: NPMS.io popularity score based on downloads and stars. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
-- **maintenance**: NPMS.io maintenance score based on activity. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
-- **score**: The overall NPMS.io combined score. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
-- **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
-
-#### Examples
-
-```md
-# Version Badge
-
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/nuxt)](https://npmx.dev/package/nuxt)
-
-# License Badge
-
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/license/vue)](https://npmx.dev/package/vue)
-
-# Monthly Downloads
-
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/downloads/lodash)](https://npmx.dev/package/lodash)
-
-# Scoped Package (Install Size)
-
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/size/@nuxt/kit)](https://npmx.dev/package/@nuxt/kit)
-
-# Specific Version
-
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/react/v/18.0.0)](https://npmx.dev/package/react)
-
-# Quality Score
-
-[![Open on npmx.dev](https://npmx.dev/api/registry/badge/quality/pinia)](https://npmx.dev/package/pinia)
-```
-
-#### Customization Parameters
-
-You can further customize your badges by appending query parameters to the badge URL.
-
-##### `labelColor`
-
-Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix). The label text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
-
-- **Default**: `#0a0a0a`
-- **Usage**: `?labelColor=HEX_CODE`
-
-##### `label`
-
-Overrides the default label text. You can pass any string to customize the label displayed on the badge.
-
-- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
-- **Usage**: `?label=YOUR_LABEL`
-
-##### `color`
-
-Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix). The text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
-
-- **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
-- **Usage**: `?color=HEX_CODE`
-
-| Example        | URL                                   |
-| :------------- | :------------------------------------ |
-| **Hot Pink**   | `.../badge/version/nuxt?color=ff69b4` |
-| **Pure Black** | `.../badge/version/nuxt?color=000000` |
-| **Brand Blue** | `.../badge/version/nuxt?color=3b82f6` |
-
-##### `name`
-
-When set to `true`, this parameter replaces the static category label (like "version" or "downloads/mo") with the actual name of the package. This is useful for brand-focused READMEs.
-
-- **Default**: `false`
-- **Usage**: `?name=true`
-
-| Type          | Default Label        | With `name=true` |
-| ------------- | -------------------- | ---------------- |
-| **Version**   | `version \| 3.12.0`  | `nuxt \| 3.12.0` |
-| **Downloads** | `downloads/mo \| 2M` | `lodash \| 2M`   |
-
-##### `style`
-
-Overrides the default badge appearance. Pass `shieldsio` to use the shields.io-compatible style.
-
-- **Default**: `default`
-- **Usage**: `?style=shieldsio`
diff --git a/docs/content/2.guide/6.badges.md b/docs/content/2.guide/6.badges.md
new file mode 100644
index 0000000000..d068fecf95
--- /dev/null
+++ b/docs/content/2.guide/6.badges.md
@@ -0,0 +1,123 @@
+---
+title: Badges
+description: Generate modern markdown badges with the npmx.dev API
+navigation:
+  icon: i-lucide:badge
+---
+
+npmx.dev offers many different SVG badges with stats about any package via its API. You can get the Markdown code to display an accessible badge which links to the package URL on npmx.dev with the following interactive generator:
+
+:badge-generator
+
+## Available Badge Types
+
+- **version**: Shows the latest or specific version of the package. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
+- **license**: Displays the package license (e.g., MIT, Apache-2.0). :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"}
+- **size**: Shows the install size (via Bundlephobia) or unpacked size. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
+- **downloads**: Displays monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-day**: Displays daily download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-week**: Displays weekly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-month**: Alias for monthly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **downloads-year**: Displays yearly download statistics. :img{src="https://img.shields.io/badge/%23f97316-f97316" class="inline align-middle h-5 w-14"}
+- **vulnerabilities**: Shows the number of vulnerabilities found via OSV. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
+- **dependencies**: Lists the total count of package dependencies. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
+- **created**: Displays the date the package was first published. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+- **updated**: Displays the date of the most recent modification. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+- **engines**: Shows the supported Node.js version range. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
+- **types**: Indicates if TypeScript types are included. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+- **maintainers**: Displays the total count of package maintainers. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
+- **deprecated**: Shows if the package is active or deprecated. :img{src="https://img.shields.io/badge/%2322c55e-22c55e" class="inline align-middle h-5 w-14"} / :img{src="https://img.shields.io/badge/%23ef4444-ef4444" class="inline align-middle h-5 w-14"}
+- **quality**: NPMS.io quality score based on linting and tests. :img{src="https://img.shields.io/badge/%23a855f7-a855f7" class="inline align-middle h-5 w-14"}
+- **popularity**: NPMS.io popularity score based on downloads and stars. :img{src="https://img.shields.io/badge/%2306b6d4-06b6d4" class="inline align-middle h-5 w-14"}
+- **maintenance**: NPMS.io maintenance score based on activity. :img{src="https://img.shields.io/badge/%23eab308-eab308" class="inline align-middle h-5 w-14"}
+- **score**: The overall NPMS.io combined score. :img{src="https://img.shields.io/badge/%233b82f6-3b82f6" class="inline align-middle h-5 w-14"}
+- **name**: Simple badge displaying the package name. :img{src="https://img.shields.io/badge/%2364748b-64748b" class="inline align-middle h-5 w-14"}
+
+## Examples
+
+```md
+# Version Badge
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/nuxt)](https://npmx.dev/package/nuxt)
+
+# License Badge
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/license/vue)](https://npmx.dev/package/vue)
+
+# Monthly Downloads
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/downloads/lodash)](https://npmx.dev/package/lodash)
+
+# Scoped Package (Install Size)
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/size/@nuxt/kit)](https://npmx.dev/package/@nuxt/kit)
+
+# Specific Version
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/version/react/v/18.0.0)](https://npmx.dev/package/react)
+
+# Quality Score
+
+[![Open on npmx.dev](https://npmx.dev/api/registry/badge/quality/pinia)](https://npmx.dev/package/pinia)
+```
+
+## Customization Parameters
+
+You can further customize your badges by appending query parameters to the badge URL.
+
+Use this generator to get the Markdown code you desire:
+
+:badge-generator-parameters
+
+### `label`
+
+Overrides the default label text. You can pass any string to customize the label displayed on the left half of the badge.
+
+- **Default**: Depends on the badge type (e.g., "version", "downloads/mo").
+- **Usage**: `?label=YOUR_LABEL`
+
+### `value`
+
+Overrides the default value text of the badge. You can pass any string to customize the value displayed on the right half of the badge.
+
+- **Default**: Calculated values depending on the badge type (e.g., "v4.2.0", "5.4M").
+- **Usage**: `?label=YOUR_LABEL`
+
+### `labelColor`
+
+Overrides the default label color. You can pass a standard hex code (with or without the `#` prefix). The label text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
+
+- **Default**: `#0a0a0a`
+- **Usage**: `?labelColor=HEX_CODE`
+
+### `color`
+
+Overrides the default strategy color. You can pass a standard hex code (with or without the `#` prefix). The text color is automatically chosen (black or white) based on WCAG contrast ratio, so the badge remains readable.
+
+- **Default**: Depends on the badge type (e.g., version is blue, downloads are orange).
+- **Usage**: `?color=HEX_CODE`
+
+| Example        | URL                                   |
+| :------------- | :------------------------------------ |
+| **Hot Pink**   | `.../badge/version/nuxt?color=ff69b4` |
+| **Pure Black** | `.../badge/version/nuxt?color=000000` |
+| **Brand Blue** | `.../badge/version/nuxt?color=3b82f6` |
+
+### `name`
+
+When set to `true`, this parameter replaces the static category label (like "version" or "downloads/mo") with the actual name of the package. This is useful for brand-focused READMEs.
+
+- **Default**: `false`
+- **Usage**: `?name=true`
+
+| Type          | Default Label        | With `name=true` |
+| ------------- | -------------------- | ---------------- |
+| **Version**   | `version \| 3.12.0`  | `nuxt \| 3.12.0` |
+| **Downloads** | `downloads/mo \| 2M` | `lodash \| 2M`   |
+
+### `style`
+
+Overrides the default badge appearance. Pass `shieldsio` to use the shields.io-compatible style.
+
+- **Default**: `default`
+- **Usage**: `?style=shieldsio`
diff --git a/docs/shared/utils/badges.ts b/docs/shared/utils/badges.ts
new file mode 100644
index 0000000000..c9152c0fad
--- /dev/null
+++ b/docs/shared/utils/badges.ts
@@ -0,0 +1,32 @@
+export const BADGE_TYPES = Object.freeze([
+  'version',
+  'license',
+  'size',
+  'downloads',
+  'downloads-day',
+  'downloads-week',
+  'downloads-month',
+  'downloads-year',
+  'vulnerabilities',
+  'dependencies',
+  'created',
+  'updated',
+  'engines',
+  'types',
+  'maintainers',
+  'deprecated',
+  'quality',
+  'popularity',
+  'maintenance',
+  'score',
+  'name',
+] as const)
+
+export type BadgeType = (typeof BADGE_TYPES)[number]
+
+export function titleCase(str: string) {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' per ')
+}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 0000000000..307b2134b9
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}
diff --git a/knip.ts b/knip.ts
index 506be4c7c7..b40fc70b0d 100644
--- a/knip.ts
+++ b/knip.ts
@@ -51,7 +51,8 @@ const config: KnipConfig = {
       project: ['src/**/*.ts!', '!src/mock-*.ts'],
     },
     'docs': {
-      entry: ['app/**/*.{ts,vue,css}'],
+      entry: ['app/**/*.{ts,vue,css}', 'shared/**/*.{ts,vue,css}'],
+      project: ['**/*.{ts,vue,cjs,mjs}'],
       ignoreDependencies: ['@nuxtjs/mdc'],
     },
   },
diff --git a/package.json b/package.json
index 97b2e316ae..6812ebc6a7 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "mock-connector": "vp run --filter npmx-connector dev:mock",
     "generate-pwa-icons": "pwa-assets-generator",
     "preview": "nuxt preview",
-    "postinstall": "(pnpm rebuild @resvg/resvg-js || true) && vp run generate:lexicons && vp run generate:sprite && nuxt prepare && vp config",
+    "postinstall": "(pnpm rebuild @resvg/resvg-js || true) && vp run generate:lexicons && vp run generate:sprite && nuxt prepare && nuxt prepare --cwd docs && vp config",
     "generate:fixtures": "node scripts/generate-fixtures.ts",
     "generate:jwk": "node scripts/gen-jwk.ts",
     "test": "vp test",
diff --git a/server/api/registry/badge/[type]/[...pkg].get.ts b/server/api/registry/badge/[type]/[...pkg].get.ts
index 5b4033e642..2ce404e381 100644
--- a/server/api/registry/badge/[type]/[...pkg].get.ts
+++ b/server/api/registry/badge/[type]/[...pkg].get.ts
@@ -23,6 +23,7 @@ const SafeColorSchema = v.pipe(
 const QUERY_SCHEMA = v.object({
   name: v.optional(v.string()),
   label: v.optional(SafeStringSchema),
+  value: v.optional(SafeStringSchema),
   color: v.optional(SafeColorSchema),
   labelColor: v.optional(SafeColorSchema),
 })
@@ -289,6 +290,10 @@ async function fetchInstallSize(packageName: string, version: string): Promise<n
 }
 
 const badgeStrategies = {
+  'name': async (pkgData: globalThis.Packument) => {
+    return { label: 'npm', value: pkgData.name, color: COLORS.slate }
+  },
+
   'version': async (pkgData: globalThis.Packument, requestedVersion?: string) => {
     const version = requestedVersion ?? getLatestVersion(pkgData) ?? 'unknown'
     return {
@@ -448,6 +453,7 @@ export default defineCachedEventHandler(
       const labelColor = queryParams.success ? queryParams.output.labelColor : undefined
       const showName = queryParams.success && queryParams.output.name === 'true'
       const userLabel = queryParams.success ? queryParams.output.label : undefined
+      const userValue = queryParams.success ? queryParams.output.value : undefined
       const badgeStyleResult = v.safeParse(BadgeStyleSchema, query.style)
       const badgeStyle = badgeStyleResult.success ? badgeStyleResult.output : 'default'
 
@@ -461,7 +467,7 @@ export default defineCachedEventHandler(
       const strategyResult = await strategy(pkgData, requestedVersion)
 
       const finalLabel = userLabel ? userLabel : showName ? packageName : strategyResult.label
-      const finalValue = strategyResult.value
+      const finalValue = userValue ? userValue : strategyResult.value
 
       const rawColor = userColor ?? strategyResult.color
       const finalColor = rawColor?.startsWith('#') ? rawColor : `#${rawColor}`