Music Player
A now playing card puts playback control anywhere in a layout. Cover art, the track title and artist, a progress bar, and transport buttons for previous, play, and next make up the standard anatomy. Music apps, podcast players, and media dashboards use the pattern as both a compact widget and the heart of a full screen.
<div class="card">
<img
src="https://images.unsplash.com/photo-1605084198811-7a358b91dc15?rect=0,0,4000,4000&w=640&h=640&fit=crop&auto=format&q=100"
alt="Album cover"
class="aspect-square w-full object-cover"
/>
<div class="card-header text-center">
<h3 class="card-title">Midnight Dreams</h3>
<p class="card-description">Luna Eclipse</p>
</div>
<div class="card-content grid gap-2">
<progress
class="progress"
value="83"
max="225"
aria-label="Playback position"
></progress>
<div class="flex justify-between text-xs text-muted-foreground">
<span>1:23</span><span>3:45</span>
</div>
</div>
<div class="card-footer justify-center gap-4">
<button class="btn btn-ghost btn-icon" aria-label="Shuffle">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-shuffle"
aria-hidden="true"
>
<path d="m18 14 4 4-4 4"></path>
<path d="m18 2 4 4-4 4"></path>
<path
d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"
></path>
<path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path>
<path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path>
</svg></button
><button class="btn btn-ghost btn-icon" aria-label="Previous track">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-skip-back"
aria-hidden="true"
>
<path
d="M17.971 4.285A2 2 0 0 1 21 6v12a2 2 0 0 1-3.029 1.715l-9.997-5.998a2 2 0 0 1-.003-3.432z"
></path>
<path d="M3 20V4"></path>
</svg></button
><button class="btn btn-icon rounded-full" aria-label="Pause">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-pause"
aria-hidden="true"
>
<rect x="14" y="3" width="5" height="18" rx="1"></rect>
<rect x="5" y="3" width="5" height="18" rx="1"></rect>
</svg></button
><button class="btn btn-ghost btn-icon" aria-label="Next track">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-skip-forward"
aria-hidden="true"
>
<path d="M21 4v16"></path>
<path
d="M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z"
></path>
</svg></button
><button class="btn btn-ghost btn-icon" aria-label="Repeat">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-repeat"
aria-hidden="true"
>
<path d="m17 2 4 4-4 4"></path>
<path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
<path d="m7 22-4-4 4-4"></path>
<path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
</svg>
</button>
</div>
</div>Browse more card examples.