API & Playground
The PlayList API stays intentionally focused. Pass grouped tracks by mood or category, then adjust autoplay, theme, or layout hooks without wiring Jukebox yourself.
type PlayListTrack = { title: string; artist: string; videoId: string;}; type PlayListItem = { title: string; image?: string; data: PlayListTrack[];}; type PlayListProps = { playlist: PlayListItem[]; autoplay?: boolean; showSeekBar?: boolean; accentColor?: string; theme?: "light" | "dark"; size?: "mini" | "compact" | "expanded"; defaultSize?: "mini" | "compact" | "expanded"; onSizeChange?: (size: "mini" | "compact" | "expanded") => void; position?: "bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center"; offset?: number | { x: number; y: number }; portal?: boolean; className?: string;};Props
| Prop | Type | Notes |
|---|---|---|
playlist | PlayListItem[] | Required. Each item becomes a tab with an optional cover image and its own track list. |
accentColor | string | Optional. Overrides the built-in green accent used by the play button, active tabs, active tracks, and seek thumb. |
autoplay | boolean | Optional. Defaults to "false" and starts from the active tab's first track when enabled. |
theme | "dark" | "light" | Optional. Supports "dark" and "light". Defaults to "dark". |
className | string | Optional. Use it to attach layout classes for inline, fixed, or custom positioned rendering. |
Playground
The live preview below renders inline for docs only. Use it to compare the available light and dark themes, size modes, and accent colors while keeping the built-in tab navigation and player controls visible.
Sparks
Coldplay
Chill
Playlists
Chill
Sparks
Coldplay
1 / 9
0:000:00