Zero-dependency, configurable <npmx-card> web component for displaying npm package details with links to npmx.dev or npm.

This package is not affiliated with npmx or npm.

• Available on NPM
• Demo on CodePen

Usage

Install the web component by whatever means you prefer, then import it:

<script src="npmx-embed.js"></script>

Use the web component:

<npmx-card package="npmx-embed"></npmx-card>
<npmx-card package="npmx-embed" version="0.1.1"></npmx-card>
<npmx-card package="npmx-embed" details="size,downloads"></npmx-card>
<npmx-card package="npmx-embed" details="all"></npmx-card>
<npmx-card package="npmx-embed" view="npm"></npmx-card>

Attributes

| Attribute | Required | Description | Values | | --------- | -------- | ----------------------------------------- | ------------------------------------------------------------------------------------- | | package | Yes | The package to display. | Any npm package name | | version | No | The version of the package for details. | latest (default), a version, or a dist-tag | | details | No | The metadata fields to display. | size,downloads,type (default), all, or a comma-separated list of available fields | | view | No | Where the outgoing 'View on' link points. | npmx (default) or npm |

Available details fields: size, downloads, type, licence/license, published, updated, created, dependencies, dev-dependencies, peer-dependencies, versions, files, types, engines, author, maintainers, repository, homepage, keywords, funding.

Theming

Default theming is based on npmx's appearance, but you can theme the component as you wish. By default, the component follows the system light/dark modes. You can customise the card with this set of CSS Custom Properties:

npmx-card {
	--npmx-bg: light-dark(oklch(100% 0 0), oklch(17.1% 0 0));
	--npmx-border: light-dark(oklch(85.14% 0 0), oklch(26.9% 0 0));
	--npmx-text: light-dark(oklch(4.6% 0 0), oklch(98.2% 0 0));
	--npmx-accent: light-dark(oklch(50% 0.16 247.27), oklch(78.7% 0.128 230.318));
	--npmx-radius: 0.5rem;
	--npmx-radius-sm: 0.375rem;
	--npmx-radius-xs: 0.25rem;
	--npmx-font: "Comic Sans";
	--npmx-font-mono: "Comic Mono";
}

--npmx-radius controls the card radius. --npmx-radius-sm and --npmx-radius-xs control tags and small details radii. By default, the Geist and Geist Mono fonts are used when available, with system fallbacks if they aren't.