react-youtube-jukebox

A YouTube jukebox that feels like product UI. Small API, light bundle, and lazy-loaded player.

core packagereact-youtube-jukebox

Two main exports — Jukebox for floating playback and PlayList for inline panels — with automatic styles and a small core bundle. React stays external, and the YouTube iframe API loads on demand.

11.5 KBCore bundle

2Main exports

6Edge presets

01Install the packageAdd the package and stylesheet entry once.02Render your first jukeboxDrop in tracks and mount the default player.03Explore presets and layoutsCompare themes, chrome, and custom expansions.04Build a playlistGroup tracks into tabbed playlists with built-in playback.

import { Jukebox } from "react-youtube-jukebox"; const tracks = [  { videoId: "yTg4v2Cnfyo", title: "Soul Below", artist: "Ljones" },  { videoId: "s4MQku9Mkwc", title: "Something About Us", artist: "Daft Punk" },]; export function Page() {  return <Jukebox tracks={tracks} theme="ride" chrome="classic" />;}

Two Ways to Play

Jukebox

A floating player fixed to the viewport edge. Stays compact by default, expands on demand, and follows the user across page navigation.

Jukebox API

PlayList

An inline music panel that lives inside your page layout. Grouped tabs, cover art, and a built-in player — no portal, no overlay.

PlayList API

Highlights

Dock-first interaction

Start compact, expand on demand, and keep playback controls close to the viewport edge instead of inside page content.

Small core, lazy-loaded player

Keep React as a peer dependency, ship a small core bundle, and load the YouTube iframe API only when the player mounts.

Replace the expanded panel

Use "renderExpandedContent" when the built-in player shell is not enough and you need a custom layout around the same controls.