components / album-art

album-art.

square cover tile with a real fallback state — expired cdn links and art-less tracks are the norm in music apis, so onError swaps to a disc glyph without changing the tile's footprint. pass an array of urls for a playlist mosaic (halves, half-plus-quarters, or a grid), and bleed to throw the cover's colour onto the page behind it.

fallback

404 → fallback

bleed

mosaic · 2

mosaic · 3

mosaic · 4

installation

bunx @justin06lee/chrome@latest add album-art

props

name	type	default	description
src	string \| string[]	-	cover url; omit or let it fail and the fallback takes over. an array is a mosaic — up to four covers laid out so the tile is always fully filled.
alt	string	''	describe the record, not the picture.
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	'full' fills the container as a square.
bleed	boolean	false	blurred copy of the art behind the tile; only reads at lg and up.
fallback	ReactNode	-	node shown when there is no art.
onClick	() => void	-	renders the tile as a button.
href	string	-	renders the tile as a link.
linkComponent	React.ElementType	-	anchor component for internal hrefs (e.g. next/link).
overlay	ReactNode	-	drawn on top of the art — a play button, a hover scrim.
className	string	-