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.