API & Playground

The public API stays intentionally small in v1. Consumers pass track metadata plus a few playback and positioning props.

type JukeboxTrack = {
  videoId: string;
  title: string;
  artist?: string;
};

type JukeboxTheme = "glass" | "simple" | "sunset" | "ride";
type JukeboxChrome = "classic" | "wallet" | "ride";

type JukeboxProps = {
  tracks: JukeboxTrack[];
  autoplay?: boolean;
  position?:
    | "bottom-right"
    | "bottom-left"
    | "bottom-center"
    | "top-right"
    | "top-left"
    | "top-center";
  theme?: JukeboxTheme;
  chrome?: JukeboxChrome;
  offset?: number | { x: number; y: number };
  portal?: boolean;
  className?: string;
};

Props

Prop	Type	Notes
`tracks`	`JukeboxTrack[]`	Required. Empty and single-track cases are handled safely.
`position`	edge preset	Controls top/bottom placement and supports left, right, or center alignment.
`theme`	`"glass" \| "simple" \| "sunset" \| "ride"`	Optional. Defaults to `"glass"`.
`chrome`	`"classic" \| "wallet" \| "ride"`	Optional. Switches shell and control styling. Defaults to `"classic"`.
`autoplay`	`boolean`	Defaults to `true` and starts muted on first load.
`offset`	`number \| { x, y }`	Applies spacing from the chosen edge preset.
`portal`	`boolean`	Defaults to `true`. Inline mode is opt-in.
`className`	`string`	Root-level hook for limited customization in v1.

Playground

The live preview below renders inline for docs only. The package default remains portal rendering on the viewport, and you can switch themes and chrome presets here to compare the available combinations.