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

PyPI Embed

A web component for embedding PyPI packages on the web.

Zero-dependency, configurable <pypi-card> web component for displaying Python package details with links to PyPI.

This package is not affiliated with PyPI or the Python Software Foundation.

Usage #

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

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

Use the web component:

<pypi-card package="requests"></pypi-card>
<pypi-card package="requests" version="2.32.3"></pypi-card>
<pypi-card package="requests" details="size,downloads"></pypi-card>
<pypi-card package="requests" details="all"></pypi-card>

Attributes #

Attribute Required Description Values
package Yes The package to display. Any PyPI package name
version No The version of the package for details. latest (default) or an exact release version
details No The metadata fields to display. size,downloads,type (default), all, or a comma-separated list of available fields

Available details fields: size, downloads, type, licence/license, published, updated, created, dependencies, extras, versions, files, typing/types, python/engines, status, author, maintainers, repository, homepage, keywords, funding.

Theming #

By default, the component follows the system light/dark modes. You can customise the card with this set of CSS Custom Properties:

pypi-card {
	--pypi-bg: light-dark(#ffffff, #1b1b1b);
	--pypi-border: light-dark(#d2d2d2, #3f3f3f);
	--pypi-border-width: 1px;
	--pypi-text: light-dark(#464646, #f5f5f5);
	--pypi-accent: light-dark(#006dad, #6cb6e8);
	--pypi-radius: 0.5rem;
	--pypi-radius-sm: 0.375rem;
	--pypi-radius-xs: 0.25rem;
	--pypi-font: "Comic Sans";
	--pypi-font-mono: "Comic Mono";
}

--pypi-border-width controls the thickness of the card border. --pypi-radius controls the card radius. --pypi-radius-sm and --pypi-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.