shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Put an episode and its chapters in a card with this podcast product card for React with React Aria. A hairline frame with a plus mark on each corner holds two cells with a divider between them. The start cell has a drawn square cover, the episode title and host, a Slider scrubber from 0 to 42:18 with the position ("11:45 of 42:18") and the minutes to go at the chosen speed, a Toggle for play and pause, "Back 15 s" and "Forward 30 s" buttons and a Toggle Group for speed. The end cell lists five chapters as rows that jump the scrubber to the chapter's start and mark the one the playhead is in, then offers the ad-free season with an outline "Add to bag" that turns into "Added" with an Undo. The playhead moves only when the visitor moves it; the words "No audio in this demo" say so. Nothing is played, stored or bought. For podcasts, audiobooks and talks that have chapters.
FAQ
How do I change the episode and its chapters?
Edit CHAPTERS and DURATION. Each chapter has a title and a start in seconds; its length is the gap to the next start, or to the end for the last one. The chapter the playhead is in is the last one whose start has passed, so keep them in order and start the first at 0.
How does the scrubber work?
It is a slider in whole seconds. The arrow keys move it a second, Back 15 s and Forward 30 s move it by those amounts and stop at both ends, and a chapter row sets it to that chapter's start. The status line is written when a drag, a key press or a button settles, not on every step, so a screen reader is not flooded.
What does the speed group change?
Only the time to go: the seconds remaining are divided by the speed and rounded up to whole minutes, so 1.5x with 30 minutes to go reads "About 20 min to go". It does not change the playhead.
Does it play anything?
No. Pressing Play only toggles the button and says in the status line that there is no audio in this demo. To play real audio, hold an audio element, start it from play, and set the position from its timeupdate event instead of leaving it to the visitor.
What stays local, and how do I wire it for real?
The position, the speed and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with your cart calls. The cover is typed shapes: swap Cover for an img.
Is it accessible?
The slider is named for the episode's position and speaks its value in minutes and seconds. The chapter rows are buttons in an ordered list and the current one is marked with aria-current, with "playing now" added for a screen reader. Every action is announced by the polite status line.
