Docs·Album Cards

Album Cards

Stacked Spotify album covers that eject a spinning vinyl on click.

Installation

$pnpm dlx shadcn@latest add @spiderui/album-cards

Uses /api/spotify. Set up the route on the Spotify Card page.

Usage

API Reference

PropTypeDefault
albumsAlbum entries with a unique id and Spotify track URL.
AlbumCardData[]—
titleOptional label (reserved for custom layouts).
string"Music I'm Vibin' to"
apiPathAPI route used to fetch track metadata.
string"/api/spotify"
classNameAdditional classes on the outer wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { AlbumCards } from "@/components/ui/album-cards"
const albums = [
  { id: "1", url: "https://open.spotify.com/track/0DTSnA1bcVI5niJzoyBPyZ" },
  { id: "2", url: "https://open.spotify.com/track/4iZ4pt7kvcaH6Yo8UoZ4s2" },
  { id: "3", url: "https://open.spotify.com/track/2374M0fQpWi3dLnB54qaLX" },
]

export default function Page() {
  return <AlbumCards albums={albums} />
}