shadcn.io is not affiliated with official shadcn/ui
Podcast Episodes Carousel Block for React
Eight slow-radio episodes across three seasons on a hairline track, with a season switch that jumps and follows, a play toggle on each episode and a now-playing bar with a Pause.
Installation
Overview
Let listeners move through a show by season, with this podcast episodes carousel for React with Base UI. Hushcast, a slow-radio podcast, lists eight episodes across three seasons. Each cell has the season and episode number, the title, a guest with initials, a fixed date, the length and a play toggle. The toolbar holds one Segment Group, "Season 1, 2, 3", which scrolls the track to a season and follows it as you drag. Pressing play marks one episode at a time as playing in a now-playing bar, which names it and has a Pause; no audio plays in this demo and the bar says so. The foot holds the counter, a dot for each step and Previous and Next Buttons. Three episodes show from the large breakpoint, two from medium and one with the next peeking on a phone. The bands are ruled by Guides. The show and its guests are made up for the example.
FAQ
How do I add my own episodes?
Edit EPISODES, in season order. Each has an id, a season, a number, a title, a guest, an ISO date iso and minutes. Add a season by adding its number to SEASONS. The switch, the jump targets and the counter are derived from the list.
How does the season switch follow the track?
The current season is the season of the first whole episode, or of the last one on the final page. A jump to a season that cannot reach the start of the track keeps that season current until the track moves again.
The jump calls Embla's scrollTo, and the page follows Embla's select event.
What does the play toggle do?
It marks one episode as playing; pressing another moves the mark, pressing the same one pauses. The now-playing bar names the episode and its length and has a Pause, and its text is the block's one polite live region. No audio is played. To wire it for real, create an audio element for the playing episode in an effect and set its source from your feed.
How does it work with a keyboard?
Tab reaches the controls and Previous and Next. With focus inside the track's panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Cells that are out of view are hidden from the tab order and from screen readers.