Docs·Vertical Spotify Card

Vertical Spotify Card

Tall vertical Spotify card with progressive blur album art, seek bar, and transport controls.

Installation

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

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

Usage

API Reference

PropTypeDefault
urlFull Spotify track URL.
string—
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—

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