npm Badge
Live npm package badge showing version, weekly downloads, license, and last publish date. Async server component — fetches data at build time with ISR.
class-variance-authority
Preview
Installation
$ shadcn add jalco/npm-badgeUsage
import { NpmBadge } from "@/components/npm-badge"<NpmBadge package="react" />Async server component. Fetches the npm registry at build time and caches the result for 1 hour via Next.js ISR. No API key required.
Layouts
Inline
Compact pill showing the npm icon and version. The default layout.
Row
Segmented horizontal strip showing package name, version, downloads, and license.
Default
reactv19.2.479.5M/wkMIT
Outline + npm icon
nextv16.1.625.9M/wkMIT
Scoped package
@tanstack/react-queryv5.90.2120.7M/wkMIT
Card
Expanded card with description, version badge, and stats row.
Examples
Row variants
Default
reactv19.2.479.5M/wkMIT
Outline
reactv19.2.479.5M/wkMIT
Ghost
reactv19.2.479.5M/wkMIT
API Reference
NpmBadge
PropType
Notes
- ISR caching. Registry and download data are cached for 1 hour via
next.revalidate. No API key required. - Pre-fetched data. Pass the
dataprop to skip the API calls entirely — useful for static builds or when fetching data separately. - Scoped packages. Supports scoped names like
@tanstack/react-query.