Delta Components

Docs

Spotify

A React component for embedding Spotify tracks and playlists with automatic type detection, loading states, and responsive design.

Preview

Code

Open in

Single Track Example:

Playlist Example:

Overview

The Spotify component seamlessly integrates Spotify content into web applications, providing users with rich music previews and discovery without leaving your site. It automatically detects content types and optimizes layouts, enhancing user engagement while maintaining fast loading times. Perfect for music blogs, artist portfolios, and any application where music discovery and sharing are important.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/spotify.json

Usage

"use client"
 
import { Spotify } from "@/registry/media/spotify"
 
export function Component() {
  return (
    <Spotify
      id="4iV5W9uYEdYUVa79Axb7Rh"
      type="track"
      width={352}
      height={152}
    />
  )
}

API Reference

Props

Prop	Type	Default	Description
`id`	`string`	-	Spotify ID for track or playlist (required)
`type`	`"track" \| "playlist"`	`"track"`	Type of Spotify content (auto-detected if not provided)
`width`	`string \| number`	`"100%"`	Width of the embedded player
`height`	`string \| number`	`152` for tracks, `380` for playlists	Height of the embedded player