Cover Art · paneui

1048

Installation

pnpm dlx shadcn@latest add @paneui/cover-art

Usage

import { CoverArt } from "@/components/ui/cover-art"

<CoverArt variant={2} className="aspect-video" />
<CoverArt seed={post.slug} aria-label={post.title} className="aspect-video rounded-xl" />

Examples

From a Seed

Mirror and Tones

RTL

Accessibility

The art is role="img", named by the locale’s coverArt label (“Abstract cover illustration” in English) through a hidden element, so it works without client code. Pass aria-label with the post title, or aria-hidden when a caption next to it already names the post.

Colours

Every colour is a theme token, so the art follows the accent and dark mode. Clip it with a wrapper (overflow-hidden rounded-xl) to round its corners.

This art is CSS for the page. For an opengraph-image route use OgCoverArt from OG Image: the same compositions in inline styles, and the same seed picks the same art.

Seeds

A seed sets the composition, the mirror, the tone offset and a pattern for the tile, dot and digit compositions, so slugs next to each other in a list look different. variant on its own draws the composition with no mirror and the first tones; 0 to 3 look as they did before 4 to 7 were added. Digits never mirror; a seed changes the numbers instead.

API Reference

CoverArt

Also accepts every prop of div.

variant: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7; Which composition to draw. Wins over seed; without either it is 0.
seed: string; Picks composition, mirror, tones and pattern from a stable hash of the string.
mirror: "none" | "x" | "y" | "xy"; Flips the composition. Defaults to the seed's, or "none".
ramp: 0 | 1 | 2; Shifts the tones along the accent ladder. Defaults to the seed's, or 0.

Prop	Type	Default	Description
variant	0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7	—	Which composition to draw. Wins over `seed`; without either it is `0`.
seed	string	—	Picks composition, mirror, tones and pattern from a stable hash of the string.
mirror	"none" \| "x" \| "y" \| "xy"	—	Flips the composition. Defaults to the seed's, or `"none"`.
ramp	0 \| 1 \| 2	—	Shifts the tones along the accent ladder. Defaults to the seed's, or `0`.

data-variant: The composition drawn, 0 to 7.
data-mirror: The mirror applied.
data-ramp: The tone offset applied.

Data attribute	Description
data-variant	The composition drawn, `0` to `7`.
data-mirror	The mirror applied.
data-ramp	The tone offset applied.

coverArtVariant

coverArtVariant(seed) returns the variant a seed picks, for a matching thumbnail elsewhere.

coverArtStyle

coverArtStyle(seed) returns { variant, mirror, ramp, pattern }, everything the seed decides.