npm
Badges for npm packages — version, downloads, license, types, and more.
Display live stats for any npm package.
Version (branded)
Monthly downloads
Types (blue theme)
License (outline)
Node version
Dependents
Available badges
| Badge | Endpoint | Description |
|---|---|---|
| Version | /npm/{package} | Latest version |
| Downloads | /npm/dw/{package}, /npm/dm/{package}, etc. | Download counts |
| License | /npm/license/{package} | Package license |
| Node Version | /npm/node/{package} | Required Node.js version |
| Types | /npm/types/{package} | TypeScript types status |
| Dependents | /npm/dependents/{package} | Dependent package count |
Quick examples
Scoped packages
For scoped packages like @types/react, use the full scope:
Endpoint details
Open focused sandboxes and exact URL shapes for each npm badge type.
Use these sections when you need the exact URL shape or an interactive builder for a specific badge type. Most users only need the table and quick examples above.
npm Dependents
This section covers the npm/dependents badge endpoint.
Show how many other packages depend on this package.
GET/npm/dependents/:package.svg
Path Parameters
required
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dependents/react.svg?mode=dark"><img alt="badge" src="https://shieldcn.dev/npm/dependents/react.svg?mode=light"></picture>
URL format
/npm/dependents/{package}.svgCopy-paste examples
Default — ecosystem adoption signal
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dependents/react.svg?mode=dark"><img alt="dependents" src="https://shieldcn.dev/npm/dependents/react.svg?mode=light"></picture>Outline with custom label — social proof for package pages
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dependents/react.svg?variant=outline&label=used+by&mode=dark"><img alt="dependents" src="https://shieldcn.dev/npm/dependents/react.svg?variant=outline&label=used+by&mode=light"></picture>npm Downloads
This section covers the npm/downloads badge endpoint.
Show weekly, monthly, yearly, or total download counts.
GET/npm/dm/:package.svg
Path Parameters
required
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dm/react.svg?mode=dark"><img alt="badge" src="https://shieldcn.dev/npm/dm/react.svg?mode=light"></picture>
URL formats
| Period | Endpoint | Example |
|---|---|---|
| Weekly | /npm/dw/{package} | /npm/dw/react |
| Monthly | /npm/dm/{package} | /npm/dm/react |
| Yearly | /npm/dy/{package} | /npm/dy/react |
| Total | /npm/dt/{package} | /npm/dt/react |
| Legacy | /npm/{package}/downloads | /npm/react/downloads |
Copy-paste examples
Default — monthly downloads as a growth signal
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dm/react.svg?mode=dark"><img alt="monthly downloads" src="https://shieldcn.dev/npm/dm/react.svg?mode=light"></picture>Outline — long-term adoption signal
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/dt/react.svg?variant=outline&mode=dark"><img alt="total downloads" src="https://shieldcn.dev/npm/dt/react.svg?variant=outline&mode=light"></picture>npm License
This section covers the npm/license badge endpoint.
Show the license specified in a package's package.json.
GET/npm/license/:package.svg
Path Parameters
required
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/license/react.svg?mode=dark"><img alt="badge" src="https://shieldcn.dev/npm/license/react.svg?mode=light"></picture>
URL format
/npm/license/{package}.svgCopy-paste examples
Default — license badge for package pages
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/license/react.svg?mode=dark"><img alt="license" src="https://shieldcn.dev/npm/license/react.svg?mode=light"></picture>Ghost — subtle metadata badge for footer rows
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/license/react.svg?variant=ghost&mode=dark"><img alt="license" src="https://shieldcn.dev/npm/license/react.svg?variant=ghost&mode=light"></picture>npm Node Version
This section covers the npm/node badge endpoint.
Show the Node.js version requirement from a package's engines.node field.
GET/npm/node/:package.svg
Path Parameters
required
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/node/react.svg?mode=dark"><img alt="badge" src="https://shieldcn.dev/npm/node/react.svg?mode=light"></picture>
URL format
/npm/node/{package}.svgCopy-paste examples
Outline — good compatibility badge for libraries
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/node/next.svg?variant=outline&mode=dark"><img alt="node version" src="https://shieldcn.dev/npm/node/next.svg?variant=outline&mode=light"></picture>With Node.js logo — branded compatibility badge
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/node/next.svg?logo=nodedotjs&mode=dark"><img alt="node version" src="https://shieldcn.dev/npm/node/next.svg?logo=nodedotjs&mode=light"></picture>Notes
- Returns the
engines.nodevalue from package.json - Shows "any" if no Node version is specified
npm Types
This section covers the npm/types badge endpoint.
Show whether a package includes TypeScript types or has types available via DefinitelyTyped.
GET/npm/types/:package.svg
Path Parameters
required
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/types/react.svg?mode=dark"><img alt="badge" src="https://shieldcn.dev/npm/types/react.svg?mode=light"></picture>
URL format
/npm/types/{package}.svgExamples
Type status values
| Value | Meaning |
|---|---|
bundled | Package includes its own TypeScript definitions |
@types/{pkg} | Types available via DefinitelyTyped |
none | No TypeScript types available |
Copy-paste examples
Blue theme — highlights TS support clearly
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/types/react.svg?theme=blue&mode=dark"><img alt="types" src="https://shieldcn.dev/npm/types/react.svg?theme=blue&mode=light"></picture>Branded with TypeScript logo — strong developer experience signal
npm Version
This section covers the npm/version badge endpoint.
Show the current published version of a package.
GET/npm/:package.svg
Path Parameters
required
Unscoped (react) or scoped (@types/react).
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/react.svg?mode=dark"><img alt="badge" src="https://shieldcn.dev/npm/react.svg?mode=light"></picture>
URL formats
/npm/{package}.svg/npm/v/{package}.svg/npm/v/{package}/{tag}.svgCopy-paste examples
Default — clean version badge for READMEs
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/react.svg?mode=dark"><img alt="npm version" src="https://shieldcn.dev/npm/react.svg?mode=light"></picture>Branded — npm's official red
Scoped package — secondary variant
<picture><source media="(prefers-color-scheme: dark)" srcset="https://shieldcn.dev/npm/@types/react.svg?variant=secondary&mode=dark"><img alt="npm version" src="https://shieldcn.dev/npm/@types/react.svg?variant=secondary&mode=light"></picture>Data source
- Version, license, types, node: registry.npmjs.org
- Downloads: api.npmjs.org
No API key required. Cached 1 hour.