shadcn.io is not affiliated with official shadcn/ui
Season Tabs Podcast Blog Block for React
A podcast index in season tabs: each episode row has its number, title, guest, date, a bar whose length is the episode's minutes against an hour, and a Listen link.
Installation
Overview
A podcast block for React with Base UI, written for the Kettleby Hour, a storytelling podcast. A centred header sits over an underline tab band (Season 3, Season 2, Season 1, each with its episode count) and, under it, the season's episodes as rows rail to rail. Every row has its number, the title, the guest as initials and a name, a fixed date, a thin bar whose length is the episode's minutes over one hour ("42 min") and a Listen link. Each season's list is drawn once more, unseen, in the same grid cell, so the block never changes height. It's built from Tabs, Avatar and Guides. For a show with seasons, a lecture series or any list that groups by term. Nothing plays here: Listen is a link to the episode's page, and the episodes and lengths are example data.
FAQ
How do I add a season or an episode?
Edit SEASONS: each season has an id, a label and its episodes, and an episode has a title, a guest, an ISO date, a length in minutes and an href. A new season adds a tab on its own. Dates are fixed strings, so the server and every browser write the same day.
What does the bar show?
The episode's length against one hour: 30 minutes fills half the track. The number sits beside it as text ("42 min"), so the bar never carries meaning alone, and it is hidden from assistive technology. It keeps its direction in a right-to-left page.
How do the tabs work from the keyboard?
Arrow keys move between the seasons and the open season's rows are the panel. The tab band scrolls sideways on a narrow phone, and the page never changes height when you switch, because every list sits in the same cell.
Does Listen play anything?
No. It is a link to the episode's page. The row's link text is "Listen", and a hidden suffix names the season and episode for screen readers.
Related
- Pro
Speed Select Audio Blog
Audio, video, photosA read-aloud list: a Select picks the playback speed and every article's listening time and the total recompute, beside a waveform drawn from the title's letters with chapter ticks.
- Pro
Podcasts Team
Interests and clubsA podcast host's own show: the latest episode in a framed cell with a drawn waveform and a Listen link, over earlier episodes as rows with a length bar and a Newest or Longest switch.
- Pro
Podcast Show Notes About
Press and recognitionShow notes for a podcast hosting company's own show: a scrolling vertical list of eight episodes at the start and the chosen episode's notes at the end, with a summary, chapters drawn to scale and listed with time stamps, and a Listen link.
- Pro
Episode Playlist Features
Carousels and mediaA features section drawn as a podcast host's episode manager: a show header with its RSS and directory chips, five episode rows with a status badge and downloads, and a mini player docked under the list that follows the chosen row.
- 3Pro
Series Tracker Blog
Tutorials and seriesA reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
- Pro
Tabs Layout Blog
Post listsA film-criticism reading list with three underline tabs, Latest, Popular and Editor's picks, each drawing a different row: dated rows, ranked rows with read counts, and rows with an editor's note.