Skip to content
UI Kit
Accent color

Podcast

A podcast on its own website. Episode list with a player that rises in, the newest episode with chapters, the show with ways to follow and the episode page with a searchable transcript.

4 variants
Switch category

Podcast

Episode list

Every episode with its own play button. The bars bounce while it plays, the player rises in under the list.

Open in Studio

Show header

Cover, hosts, facts and the ways to follow without platform logos. The RSS feed copies with one press, the newest episode plays right there.

Open in Studio

Episode page

Player, then show notes, chapters and transcript in tabs with a gliding line. Search marks the words, a time jumps the player there.

Open in Studio

Details

What Podcast brings along, read from the registry and the source.

Area
Content
Variants
4
Version
1.0.0 · since 1.0.0
File
components/ui/podcast.tsx
Brings along
utilskitaudio-playerbuttoniconrevealmotionsection
npm packages
None
Languages
English and German, 20 texts of its own
Studio
All 4 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The PodcastProps interface from components/ui/podcast.tsx, with the comments from the code.

  • variantoptional
    PodcastVariant

    episode-listfeatured-episodeshow-headerepisode-detail

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    React.ReactNode

    The show name or a section heading

  • descriptionoptional
    React.ReactNode
  • episodesoptional
    PodcastEpisode[]
  • artworkoptional
    React.ReactNode

    Cover art of the show

  • hostoptional
    string

    show-header: who hosts

  • factsoptional
    { value: string; label: string }[]

    show-header: facts, e.g. [{ value: '86', label: 'episodes' }]

  • feedoptional
    string

    show-header: the RSS feed address

  • followoptional
    { icon: IconName; label: string; href: string }[]

    show-header: more ways to follow, e.g. a newsletter

  • notesoptional
    string[]

    episode-detail: show notes as paragraphs and links

  • linksoptional
    { label: string; href: string }[]
  • transcriptoptional
    { speaker: string; start: number; text: string }[]

    episode-detail: the transcript

Built-in texts

Podcast writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 20 texts
episodeEnglish Episode {n}German Folge {n}
playEnglish Play {t}German {t} abspielen
pauseEnglish Pause {t}German {t} pausieren
playingEnglish Now playingGerman Läuft gerade
minEnglish {n} minGerman {n} Min.
withEnglish with {names}German mit {names}
chaptersEnglish ChaptersGerman Kapitel
notesEnglish Show notesGerman Shownotes
transcriptEnglish TranscriptGerman Transkript
searchEnglish Search the transcriptGerman Im Transkript suchen
hitsEnglish {n} matchesGerman {n} Treffer
noHitsEnglish No match in this episode.German Kein Treffer in dieser Folge.
jumpEnglish Play from {t}German Ab {t} abspielen
copyFeedEnglish Copy RSS feedGerman RSS-Feed kopieren
feedCopiedEnglish Feed copiedGerman Feed kopiert
openAppEnglish Open in your podcast appGerman In deiner Podcast-App öffnen
latestEnglish Latest episodeGerman Neueste Folge
allEnglish All episodesGerman Alle Folgen
linksEnglish Links from the episodeGerman Links aus der Folge
closeEnglish Close playerGerman Player schließen

Accessibility

Read from the source of the component.

  • Sets aria-label, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles status, tab, tablist and tabpanel.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 2 places in the code switch motion off then.

Frequent questions

How do I install Podcast?

With aiw add @ai-website/podcast. The command puts components/ui/podcast.tsx into your project, the code is yours from then on. It brings along audio-player, button, icon, reveal, motion and section. It needs no further npm packages.

Which variants does Podcast have?

4 variants, Episode list, Featured episode, Show header and Episode page. You pick one with the variant prop, for example variant="featured-episode".

Can I translate the texts of Podcast?

Yes. Podcast carries 20 texts of its own in English and German, such as “Now playing”, “Chapters” and “Show notes”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Podcast?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Podcast with aiw_components and install it with aiw_add @ai-website/podcast. Name the variant in your prompt, for example variant="episode-list", and the assistant writes your content straight into the props.

Can I adjust Podcast without code?

Yes, in the Studio. All 4 variants are editable there, texts, lists and switches. The Studio writes the matching Podcast code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Podcast on a page.

Often searched

Jump to

Copied to the clipboard