The Playlist Carousel is a sleek, horizontally scrollable component designed for audio applications. Each card displays the track’s image, title, and duration, while integrating two types of progress indicators: a circular progress ring around the play/pause button showing the overall playback completion, and a linear progress bar beneath the title displaying the elapsed and total time. Users can start, pause, or switch tracks directly from the carousel, and the layout remains clean with a minimal white-and-black theme. Its intuitive interface and visual feedback make it ideal for music, meditation, or podcast apps, enhancing user engagement while maintaining a polished and modern aesthetic.
"use client"
import PlaylistCarousel, { PlaylistItem } from "@/components/ui/playlist-carousel"
export default function DemoPlaylistCarousel() {
const items: PlaylistItem[] = [
{
id: "1",
title: "Morning Chill",
duration: "3:45",
image: "https://picsum.photos/200/120?random=1",
audioSrc: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
},
{
id: "2",
title: "Evening Focus",
duration: "4:20",
image: "https://picsum.photos/200/120?random=2",
audioSrc: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
},
{
id: "3",
title: "Workout Beats",
duration: "5:10",
image: "https://picsum.photos/200/120?random=3",
audioSrc: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
},
]
return <PlaylistCarousel items={items} width={180} height={260} />
}
Part of Ruixen UI — browse the full library on 21st.dev.