Examples
Compare the most common PlayList setups below. Unlike Jukebox, PlayList always renders as an inline panel, so the examples focus on theme, tab count, and content states instead of viewport positions.
The default dark panel with multiple tabs and cover images.
Same playlist structure with the lighter surface treatment.
One playlist with a single track hides the tab row and disables skip controls.
The header falls back to the built-in gradient artwork when no cover image is passed.
Empty track arrays render safely with disabled playback controls.
Themes
Use theme to switch between "dark" and "light" surfaces without changing the playlist structure or player behavior.
<PlayList playlist={playlist} theme="dark" /><PlayList playlist={playlist} theme="light" /><PlayList playlist={playlist} theme="dark" accentColor="#8b5cf6" />Single Playlist
Pass a one-item playlist with a single track when you only need one song. The tab row stays hidden automatically and the previous / next controls are disabled, keeping a focused single-track view.
const playlist = [ { title: "Chill Vibes", image: "/images/chill.jpg", data: [ { title: "Soul Below", artist: "Ljones", videoId: "yTg4v2Cnfyo" }, ], },]; <PlayList playlist={playlist} />Optional Cover Image
The cover image is optional. When image is omitted, PlayList renders a built-in fallback header instead of leaving the header area empty.
const playlist = [ { title: "Focus Flow", data: [ { title: "Weightless", artist: "Marconi Union", videoId: "UfcAVejslrU" }, { title: "Near Light", artist: "Olafur Arnalds", videoId: "oAhO5eegMfY" }, ], },]; <PlayList playlist={playlist} />Empty Tracks
A playlist item can safely contain an empty data array. The list renders an empty message and playback controls stay disabled until real tracks are provided.
const playlist = [ { title: "Coming Soon", data: [], },]; <PlayList playlist={playlist} />Layout
Use className when the panel needs to match your page layout. Sticky sidebars, dashboard columns, and custom spacing are all handled from your app styles.
<PlayList playlist={playlist} className="playlist_sidebar" /> .playlist_sidebar { position: sticky; top: 80px;}