shadcn.io is not affiliated with official shadcn/ui
Podcast Season Grid Profile Block for Radix UI
A podcast host profile as a season grid: three seasons by up to ten episodes shaded in four weights by downloads or length, a triangle on each season's best, and a band with the picked episode's guest, date, length, downloads and its season's average.
Installation
Overview
Show a podcast as seasons of episodes, with no player, with this podcast season grid profile for React with Radix UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the host: initials, name, the show and a badge that counts the days since the latest episode from a fixed date. A pair of buttons weighs the grid by downloads or by length. The grid is a native table with the seasons down the side and the episodes across, and each cell is a radio that prints its number and takes one of four weights of foreground by how that episode ranks among all of them; each season's best wears a triangle. Picking a cell (with a click or the arrow keys) fills the band under the grid: the episode's title, its guest or "Solo, with the host", its date (counted weekly from the season's first episode), its length, its downloads and the average of its season, all worked out from the typed rows. On a phone the grid scrolls sideways inside its own region with the season names held in place. It's built from Toggle Group, Avatar, Badge and Guides, with a native table and CSS only. The host, the show, the guests and the numbers are invented. For a podcast host's page, a creator's season overview or any profile that compares episodes at a glance.
FAQ
How do I fill it with my own episodes?
Edit the three season arrays (ONE, TWO, THREE) in the Ark file: each row is [title, guest, seconds, downloads], and a season has a name and the day its first episode aired. Everything else is worked out from them: the grid's columns come from the longest season, the weights from each episode's rank among all, the dates from the season's start plus a week per episode, and the averages from the rows. Leave the guest empty for a solo episode.
How are the four weights chosen, and is colour the only signal?
Every episode is ranked by the figure you chose (downloads or length) and the ranks are cut into four equal steps, so there are always about as many cells at each weight. The weights are tints of the foreground colour, never a hue, and every cell prints its own number, so no meaning rests on shade alone. The best episode of each season carries a triangle in the cell and ", season best" in its spoken name.
How do I use the grid with a keyboard or a screen reader?
The cells are native radios in one group named "Episodes, by season", so Tab enters the grid at the picked episode and the arrow keys step through the episodes in order, picking each as you go. A screen reader hears the season, the episode, its title and its figure ("Season 2, episode 3: Switchboard, 21.3K"). The blank cells where a season ran short hold nothing and are skipped. The two weighing buttons are a Toggle Group: the arrow keys follow the layout's direction there.
How does it look on a phone?
The grid is wider than the screen, so it scrolls sideways inside its own region while the season names stay at the start; the next columns peek in as the affordance. The picked episode's band, its three figures and the status line sit under it. Nothing else changes: the same table and the same radios are used at every width.
What stays local, and how do I wire it to real data?
Everything. Weighing, picking and the averages change what is on the page and the polite status line, and nothing is sent or fetched; there is no player, no waveform and no chapter list, and nothing plays. To wire it up, replace the typed arrays with your host's stats (a server component can pass them in), keep the helpers that derive the weights, the dates and the averages, and keep the status line.
Is it accessible?
The grid is a real table with a caption that says what its cells show, th cells for the seasons and the episode numbers, and radios with full names. The status line is a polite live region present from the start and it speaks the weighing and the pick, not every arrow press twice. Focus is a visible double ring on the picked cell, the entrance is a CSS fade that stops under reduced motion, and the logical classes keep it correct in a right-to-left layout (the numbers stay left to right).