Components
Loading preview...
The Podcast Card Player is a sleek, theme-aware component designed to display podcast episodes in a compact card layout. Each card includes an image, title, and episode information, along with an inline audio player featuring play/pause functionality, a progress bar, and a live timestamp. Built using Shadcn UI, it provides a clean and consistent design that adapts seamlessly to both light and dark themes. This component is perfect for podcast apps, media sections, or content platforms where users can quickly browse and listen to episodes without leaving the page. Its modular design also allows easy configuration for multiple cards or different audio sources.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/podcast-card-player"use client"
import PodcastCardPlayer from "@/components/ui/podcast-card-player"
export default function PodcastCardPlayerDemo() {
const podcasts = [
{
imageSrc: "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?fit=crop&w=400&h=200",
title: "Health & Wellness",
episodeInfo: "Episode 45: Mindfulness Tips",
audioSrc: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
},
{
imageSrc: "https://images.unsplash.com/photo-1497493292307-31c376b6e479?fit=crop&w=400&h=200",
title: "Startup Stories",
episodeInfo: "Episode 78: Scaling Fast",
audioSrc: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
},
]
return (
<div className="p-6 flex flex-wrap gap-6 justify-center">
{podcasts.map((p, idx) => (
<PodcastCardPlayer
key={idx}
imageSrc={p.imageSrc}
title={p.title}
episodeInfo={p.episodeInfo}
audioSrc={p.audioSrc}
width={320}
/>
))}
</div>
)
}