shadcn.io is not affiliated with official shadcn/ui
Podcast Episodes Testimonials Block for React
Three podcast episodes as ruled rows, each with a play button that sweeps a darker wave across its waveform, a guest's pull quote and the episode's length.
Installation
Overview
Turn long customer conversations into social proof people can sample. A compact header names the show (The Cutover Hour, a fictional customer podcast) and holds the block's one Shine Button, "Subscribe to the show". Below it the three episodes are rows of one band, each ruled with a solid hairline and a + mark on both ends, split by a divider that lines up from row to row. On one side of the divider sit the episode number, title and length with a round outline play button; on the other, a waveform, the one line from the guest that the show keeps quoting, and their name and role. Pressing play sweeps a darker wave across the waveform in eight seconds and then resets; pressing it again stops it, and starting another episode stops the first. It's a demo player, and a line under the band says so: no audio plays. It's built from Button, Avatar, Badge, Guides and Shine Button, with Lucide icons, one CSS transition for the sweep and your theme's tokens. For landing pages, podcast sites and "customers on the record" sections.
FAQ
How do I play real audio?
Add an audio field to each episode in EPISODES and render an <audio> element for the one that is playing, or hold one Audio object in a ref. In toggle, call play() or pause() next to setPlaying, and call finish from the audio's ended event instead of letting the transition end it. For the sweep to match the real length, change duration-[8000ms] in SWEEP to the episode's running time, or drive the layer's clip-path from timeupdate.
How is the waveform drawn, and how do I use my own?
Each episode has a wave list of bar heights in percent, wrapped by bars() so every bar has a stable key. The same bars are drawn twice: a muted layer, and a layer in the foreground colour above it. The top layer is clipped away at rest, and playing transitions its clip-path open from the start of the line, so in right-to-left languages the sweep runs from the right. Export your own peaks from your audio tool as 48 numbers between 0 and 100 per episode.
Can people pause or stop it?
Yes. The play button is a toggle: it shows a pause mark while its episode is playing and stops and resets the waveform when pressed again. Only one episode plays at a time. Nothing starts on its own, so there is no autoplay to stop.
What happens with reduced motion?
The sweep does not animate: pressing play shows the waveform at the halfway point and holds it until the button is pressed again, since there is no moving playhead to run to the end.
How do screen readers and keyboards use it?
Each play button is named "Demo player: episode 14, The migration that took one weekend" and announces whether it is pressed, and Space or Enter toggles it. A hidden polite status line says "Playing a silent demo of episode 14", "Stopped the demo" or "The demo ended" after a press, and says nothing on load. The waveform is decorative and hidden. Each pull quote is a figure with a blockquote and a figcaption; the episodes are an ordered list.
How does it fit a phone, and a right-to-left page?
On phones each row stacks (the episode, then the waveform and quote), the waveform's bars shrink to fit the row, and nothing scrolls sideways at 320 px. In right-to-left languages the layout and the sweep mirror, while the play mark keeps pointing forward and each episode number, length and quote keeps its own order through bdi.
Related
- Pro
Voice Note Testimonials
Audio, video, photoThree customer voice messages in a framed chat window beside the heading and a Shine Button: a play button sweeps a waveform, and each note opens a transcript with the words that were said.
- Pro
Video Testimonials Dialog Grid
Audio, video, photoFive customer-story videos on shared hairlines, one large lead beside four smaller; each poster is drawn from UI with a play pill, and opens a player dialog with the speaker and a timed transcript.
- Pro
Testimonial With Portrait
Audio, video, photoOne customer story for a finance close tool in a reverse split: a framed illustrated portrait that a close checklist overlaps on the start, the quote and a Shine Button on the end, with a solid divider between.
- Pro
Split Layout Music Player Hero
Mobile and mediaA compact split hero for an audio product: copy and a Shine Button beside a narrow music player on a tinted panel behind a divider, with a waveform and a queue.
- Pro
Accordion Testimonials
Rows and listsCustomer stories as accordion rows beside a side header, on the page's drafting lines: each row shows the person, a one-line summary and a rating, and opens one at a time to read the full quote.
- Pro
Animated Count Testimonials
Results and figuresThree headline figures that count up to their totals when the section loads, in one hairline band with a Replay button that runs the count again, and two customer quotes in a second band beneath.