Apple Music Card

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

import { AppleMusicCard } from "@/components/apple-music-card";

<AppleMusicCard url="https://music.apple.com/us/song/blinding-lights/1499378607" />

Pass a song or album link from music.apple.com. The title, artist and artwork load from the public iTunes API, so no API key is needed. Each card shows one song. To show several songs, render one card per link:

<div className="flex gap-4">
  {urls.map((url) => (
    <AppleMusicCard key={url} url={url} />
  ))}
</div>

The card has two views. full shows the artwork, title and artist. mini shows only the artwork and the Music tag. Both are 200px wide. Switching view smoothly slides the title and artist up out of sight or back down into place, while the artwork stays the same size, so you can toggle it from your own button:

import { AppleMusicCard, type AppleMusicCardView } from "@/components/apple-music-card";

const [view, setView] = useState<AppleMusicCardView>("mini");

<button onClick={() => setView((v) => (v === "mini" ? "full" : "mini"))}>Toggle details</button>
<AppleMusicCard url={url} view={view} />

The whole card links to the song on Apple Music and opens in a new tab.

Props