Card

Cards 53

About

Music Card A visually engaging card component for displaying music tracks, featuring hover animations and a theme-adaptive design.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card to your project and fits it to your theme.

Code

How Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MusicCard } from "@/components/ui/card-6"; // Adjust this import path as needed

const MusicCardDemo = () => {
  const handlePlay = () => {
    // In a real app, you would trigger your music player logic here
    alert("Playing: Far Caspian - Let's Go Outside");
  };

  return (
    <div className="flex min-h-[400px] w-full items-center justify-center bg-background p-4">
      <MusicCard
        title="Now Playing"
        artist="Far Caspian"
        songTitle="Let's Go Outside"
        imageUrl="https://cdn.21st.dev/assets/mirror/ea/ea808267daa3bb86bfaa16b1b39b77408135a27b147a5c4022f5c8cdf8eaba7d.jpg"
        onPlay={handlePlay}
      />
    </div>
  );
};

export default MusicCardDemo;