npmx-embed
A web component for embedding npm package information on the web. npmx.dev/package/npmx-embed
embed web-component npm npmx
Star
Fork
Watch
6 1 2
Files
LICENSE
npmx-embed.js
package.json
README.md
README.md

NPMX Embed

A web component for embedding NPM packages on the web.

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.

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.