Get everything for $99, lifetime

Components

Retro Music Player

Pro

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/retro-music-player

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 161 Pro components · lifetime updates.

I have a licenseGet Pro
import { RetroMusicPlayer } from "@/components/ui/RetroMusicPlayer";

// The player is a controlled shell: you own the <audio> element.
const audio = useRef<HTMLAudioElement>(null);
const [playing, setPlaying] = useState(false);

<audio ref={audio} src="/track.mp3" loop onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} />
<RetroMusicPlayer
  songTitle="Midnight Drive"
  artist="The Outrunners"
  imageUrl="/cover.jpg"
  isPlaying={playing}
  onPlay={() => (playing ? audio.current?.pause() : audio.current?.play())}
/>

Use cases

  • Music player UI

    A characterful player for a portfolio, label site, or playlist page.

  • Podcast or audio embeds

    Wrap a single track or episode in a device that stands out.

  • Landing page centerpiece

    An interactive hero element for a music or audio product.

  • Now-playing widget

    Show the current track with working transport controls.