Components•Now playing card
Components•Now playing card
Now playing card
A now-playing card with a generated cover, scrubbable progress, transport controls, like and the next track. Playback runs on a simulated clock here; wire the callbacks to your player.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/now-playing-cardHow to use
import { NowPlayingCard, type Track } from "@/components/bjork-ui/cards/now-playing-card";const queue: Track[] = [ { id: "t1", title: "Low Tide Radio", artist: "Marisol Vane", album: "Saltwater Hours", duration: 214, colors: ["#ec5c13", "#3b1d6e"] },];<NowPlayingCard tracks={queue} device="Studio speakers" onPlayingChange={(playing) => (playing ? audio.play() : audio.pause())} onSeek={(s) => (audio.currentTime = s)} onTrackChange={(track) => load(track.id)} onLikeChange={(id, liked) => api.like(id, liked)}/>
Low Tide Radio
Marisol Vane
Saltwater Hours
1:23-2:11
Studio speakers