Examples

The package default is a floating portal render. Inside docs we keep previews inline so they stay inside the page layout, but the API example below is the real default usage.

Themes

Use theme when the default glass chrome does not match the page. If omitted, the component keeps the current default theme.

<Jukebox tracks={tracks} theme="glass" />
<Jukebox tracks={tracks} theme="simple" />
<Jukebox tracks={tracks} theme="sunset" />

Chrome Presets

The package currently exposes only the rebuilt "classic" chrome while the other presets are being reworked.

<Jukebox tracks={tracks} chrome="classic" />

Position Presets

Use position to pin the jukebox to any corner of the viewport. On mobile, prefer bottom-center or top-center so the dock stays aligned to the narrow screen. offset lets you nudge it from the chosen edge.

<Jukebox tracks={tracks} position="bottom-center" offset={20} />
<Jukebox tracks={tracks} position="top-center" offset={20} />
<Jukebox tracks={tracks} position="bottom-left" offset={20} />
<Jukebox tracks={tracks} position="top-left" offset={{ x: 24, y: 24 }} />
<Jukebox tracks={tracks} position="top-right" offset={{ x: 24, y: 24 }} />

Custom Expanded

Keep the dock and player state from the library, but render your own expanded layout with renderExpandedContent.

function CustomExpandedPanel({
  currentTrack,
  isPlaying,
  playerMountRef,
  togglePlay,
}: JukeboxExpandedRenderProps) {
  return (
    <section>
      <div ref={playerMountRef} style={{ aspectRatio: "16 / 9" }} />
      <strong>{currentTrack.title}</strong>
      <button onClick={togglePlay}>
        {isPlaying ? "Pause" : "Play"}
      </button>
    </section>
  );
}

<Jukebox
  tracks={tracks}
  renderExpandedContent={(props) => <CustomExpandedPanel {...props} />}
/>

Single Track

• Pass a one-item array when you only need a single song.
• Previous and next controls are disabled automatically.
• Playback, mute, expand, and volume control still work normally.

<Jukebox
  tracks={[
    { videoId: "yTg4v2Cnfyo", title: "Soul Below", artist: "Ljones" },
  ]}
/>

Empty Tracks

Passing an empty array is safe. The component renders a fallback dock instead of throwing and keeps playback controls disabled.

<Jukebox tracks={[]} />