About
Minimal Music Player A clean, modern music player with album art focus, intuitive controls, and smooth playback experience. Ideal for streaming platforms, playlists, or showcasing audio content with style.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Music Player to your project and fits it to your theme.
Code
How Music Player is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import React from 'react';
import { MusicPlayer } from '@/components/ui/music-player'; // Adjust the import path as needed
const MusicPlayerDemo = () => {
const song = {
albumArt: 'https://cdn.21st.dev/assets/mirror/8c/8c8a12c63e4f1b14b614a2a5b16ec4ecd342a9aaa8b81772b043cccfbf6128ca.jpg', // Replace with a real image URL
songTitle: 'Sunshine Mix',
artistName: 'Lookee Stefane',
// A placeholder audio file. Replace with your own audio file URL.
audioSrc: 'https://cdn.21st.dev/assets/mirror/ca/cadd2666c5571e12fafdb21697b26aef6f196a5a9c28e708129870167679991d.mp3',
};
return (
<div className="min-h-screen w-full bg-gray-100 dark:bg-black flex items-center justify-center p-4">
<MusicPlayer
albumArt={song.albumArt}
songTitle={song.songTitle}
artistName={song.artistName}
audioSrc={song.audioSrc}
/>
</div>
);
};
export default MusicPlayerDemo;