Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Season Tabs Podcast Blog Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A podcast block for React with React Aria, 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.

How is this different from the podcast blocks in the team and about categories?

Those show one show's latest episode, chapters or a host's manager. This one is the season-by-season index of a show, with one bar per episode to compare lengths at a glance.

Does it work right to left?

Yes. The rows and tabs mirror; dates, minutes and the episode numbers are isolated so digits stay whole.

All 100 blog blocks