Skip to main content
Player2 provides a set of React components for building a feature-rich Spotify music player web application. These components handle everything from dynamic backgrounds to lyrics display and drawer-based navigation.

​
Core Components

​
DynamicBackground

Extracts colors from album artwork and creates animated gradient backgrounds that adapt to the currently playing track. View DynamicBackground documentation →

​
LyricsDisplay

Displays synchronized lyrics with auto-scrolling and highlights the current line based on playback progress. View LyricsDisplay documentation → Provides a modal search interface with keyboard shortcuts (Cmd/Ctrl+K) for searching tracks, artists, albums, and playlists. View Search documentation →

​
Drawer Components

A set of drawer components for displaying additional information:
  • ArtistDrawer - Shows artist details, top tracks, and albums
  • QueueDrawer - Displays and manages the playback queue
  • DrawerManager - Manages nested drawer state and interactions
View Drawer documentation →

​
Component Architecture

All components are built with:
  • React - Core UI library
  • TypeScript - Type safety and better developer experience
  • Framer Motion - Smooth animations and transitions
  • Vaul - Drawer/modal functionality
  • Spotify Web API SDK - Integration with Spotify

​
Context Providers

Components rely on these context providers:
  • SpotifyContext - Provides SDK, playback state, and track information
  • LyricsContext - Manages lyrics visibility state
  • DrawerContext - Handles drawer state management

​
Getting Started

Import components from the components directory: 
import { DynamicBackground } from './components/DynamicBackground';
import { LyricsDisplay } from './components/LyricsDisplay';
import { Search } from './components/Search';
import { DrawerProvider } from './components/DrawerManager';
Wrap your app with necessary providers: 
<SpotifyProvider>
  <LyricsProvider>
    <DrawerProvider>
      <App />
    </DrawerProvider>
  </LyricsProvider>
</SpotifyProvider>

Build docs developers (and LLMs) love

Get started for freeTalk to us