Components
Loading preview...
Music Card A visually engaging card component for displaying music tracks, featuring hover animations and a theme-adaptive design.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/card-6import { 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://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
onPlay={handlePlay}
/>
</div>
);
};
export default MusicCardDemo;