Badges
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:
Available Badge Types
- version: Shows the latest or specific version of the package.
- license: Displays the package license (e.g., MIT, Apache-2.0).
- size: Shows the install size (via Bundlephobia) or unpacked size.
- downloads: Displays monthly download statistics.
- downloads-day: Displays daily download statistics.
- downloads-week: Displays weekly download statistics.
- downloads-month: Alias for monthly download statistics.
- downloads-year: Displays yearly download statistics.
- vulnerabilities: Shows the number of vulnerabilities found via OSV.
/
- dependencies: Lists the total count of package dependencies.
- created: Displays the date the package was first published.
- updated: Displays the date of the most recent modification.
- engines: Shows the supported Node.js version range.
- types: Indicates if TypeScript types are included.
/
- maintainers: Displays the total count of package maintainers.
- deprecated: Shows if the package is active or deprecated.
- quality: NPMS.io quality score based on linting and tests.
- popularity: NPMS.io popularity score based on downloads and stars.
- maintenance: NPMS.io maintenance score based on activity.
- score: The overall NPMS.io combined score.
- name: Simple badge displaying the package name.
Examples
# Version Badge
[](https://npmx.dev/package/nuxt)
# License Badge
[](https://npmx.dev/package/vue)
# Monthly Downloads
[](https://npmx.dev/package/lodash)
# Scoped Package (Install Size)
[](https://npmx.dev/package/@nuxt/kit)
# Specific Version
[](https://npmx.dev/package/react)
# Quality Score
[](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:
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