Docs·Spotify Card

Spotify Card

Horizontal Spotify card with blurred album art, spinning vinyl, seek bar, and playback controls.

Installation

$pnpm dlx shadcn@latest add @spiderui/spotify-card

Run pnpm add spotify-url-info and add the API route below.

Usage

API Reference

PropTypeDefault
urlFull Spotify track URL.
string—
sizeCard size variant.
"md" | "lg" | "xl""md"
apiPathAPI route used to fetch track preview data.
string"/api/spotify"
classNameAdditional classes on the card wrapper.
string—
onPrevPrevious track handler. Disables button when omitted.
() => void—
onNextNext track handler. Disables button when omitted.
() => void—

API route

Copy into app/api/spotify/route.ts:

// app/api/spotify/route.ts
import { NextRequest, NextResponse } from "next/server"
import spotifyUrlInfo from "spotify-url-info"

const { getPreview } = spotifyUrlInfo(fetch)

export async function GET(request: NextRequest) {
  const url = request.nextUrl.searchParams.get("url")
  if (!url) {
    return NextResponse.json({ error: "URL is required" }, { status: 400 })
  }

  try {
    const data = await getPreview(url.replace(/\/intl-[a-z]{2}\//, "/"))
    return NextResponse.json(data)
  } catch {
    return NextResponse.json({ error: "Failed to fetch" }, { status: 500 })
  }
}

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 { SpotifyCard } from "@/components/ui/spotify-card"
export default function Page() {
  return (
    <SpotifyCard
      url="https://open.spotify.com/track/0DTSnA1bcVI5niJzoyBPyZ"
      size="lg"
    />
  )
}