Overview
Components
Text Animations
Spotify Card
Display Spotify tracks with album art and blurred background.
spotify-url-info
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/spotify-card.json
Install dependencies
Install the required packages for this component:
pnpm add spotify-url-info
Copy the Source Code
Copy and paste the following code into your project:
spotify-card.svelte
index.ts
Folder Structure
Folder Structure
API Route
Create
src/routes/api/spotify/+server.ts
so the card can fetch Spotify
metadata from /api/spotify
. +server.ts
Props
| Name | Type | Default | Description |
|---|---|---|---|
url | string | required | The Spotify track, album, playlist, or episode URL sent to the API route for preview metadata. |
class | string | '' | Custom classes merged onto the root card wrapper. |