shadcn.io is not affiliated with official shadcn/ui
Episode Timeline FAQ Block for React Aria
A FAQ for a weekly interview podcast: a bar that stands for one episode with a marker at the minute each of seven questions is answered, linked both ways to the rows below.
Installation
Overview
An episode-timeline FAQ for React with React Aria. A start-aligned header sits over a band with a bar that stands for one 54-minute episode, and a marker for each of seven questions at the minute it's answered. Choosing a marker opens that question's row below and lights the marker; opening a row lights its marker and fills the bar up to it, and a caption names the question that's on. Each row carries its time ("07:55") in a chip, and its answer ends in a link to hear that minute. There is no player and no audio: the bar is an index. On a phone the bar scrolls inside its band and every marker keeps a 44 pixel target. The rails and top rule come from the Guides spine, so the block lines up with its neighbours. It's built from Accordion, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For podcast and video pages where listeners want one answer, not the whole hour.
FAQ
How do I set the episode and the timestamps?
Edit EPISODE_LENGTH (in seconds) and the at field of each entry in QUESTIONS, also in seconds; the times in the chips, the markers' places and the time elements are all worked out from them. Keep the markers at least a few minutes apart: each one is a 44 pixel target, so closer ones overlap. The "Hear it at" links go to #: point them at your episode page with a t= parameter.
Is there a player?
No, on purpose. A fake player that does nothing would be a trap, so the bar is an index of the episode's questions and the links go to the real episode. If you have a real audio element, call its currentTime from the markers' handler as well.
How do the markers work with a keyboard and a screen reader?
Each marker is a button in a group named "Episode timeline", and Tab moves between them. A marker is pressed while its question is open, and a screen reader reads its time followed by the question, so the markers make sense without the bar. The caption above the bar is a polite live region: it announces the question you chose. Choosing a marker doesn't move focus.
Are the closed answers in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found", and the browser's find in page opens the one that holds a match.
How does the accordion work with a keyboard?
Each question is a button inside its own h3 under the section's h2; Enter or Space opens it and closes the one that was open, and the markers follow. The Accordion is controlled, so both controls change the same state.
Tab moves from question to question; this accordion doesn't add arrow keys.