Ruixen Pro is now live.50+ premium components, templates, blocks, and lifetime updates.

Command Palette

Search for a command to run...

Docs
Music Player Card

Music Player Card

A rich music player card with album art, social action pills, seekable progress bar, shuffle, repeat, and full transport controls.

Installation

Usage

import MusicPlayerCard, { Track } from "@/components/ruixen/music-player-card";
 
const tracks: Track[] = [
  {
    id: "1",
    title: "Running Up That Hill (A Deal With God)",
    artist: "Kate Bush",
    cover: "/covers/track1.jpg",
    duration: "4:59",
    src: "/audio/track1.mp3",
    likes: "991k",
    comments: "6k",
  },
];
 
export default function App() {
  return <MusicPlayerCard tracks={tracks} />;
}

Props

PropTypeDefaultDescription
tracksTrack[]-Array of track objects
classNamestring-Additional CSS classes

Track Type

export interface Track {
  id: string;
  title: string;
  artist: string;
  cover: string;
  duration: string;
  src: string;
  likes?: string;
  comments?: string;
}