React Product Card Podcast

Display podcast episodes on your Next.js podcast platform with this product card component. Features episode artwork, play/pause button with progress, duration and publish date, episode number, guest info, and show notes preview. Built with shadcn/ui Card, Button, Badge, and Avatar components using Tailwind CSS. The audio-focused design encourages listening—perfect for Shopify headless podcast networks, audio platforms, or any React app with podcast content. Engaging and accessible.

React Product Card Podcast preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/product-cards-37.json

npx shadcn@latest add https://www.shadcn.io/registry/product-cards-37.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/product-cards-37.json

bunx shadcn@latest add https://www.shadcn.io/registry/product-cards-37.json

Related Components

FAQ