Zum Inhalt springen
UI Kit
Accent

Podcast

Ein Podcast auf der eigenen Website. Episodenliste mit einem Player, der aufsteigt, die neueste Folge mit Kapiteln, die Show mit Wegen zum Folgen und die Episodenseite mit durchsuchbarem Transkript.

4 Variants
Kategorie wechseln

Podcast

Episodenliste

Jede Folge mit eigenem Play-Knopf. Die Balken springen, solange sie läuft, der Player steigt unter der Liste auf.

Im Studio öffnen

Show-Header

Cover, Hosts, Fakten und die Wege zum Folgen ohne Plattform-Logos. Der RSS-Feed kopiert sich mit einem Druck, die neueste Folge spielt direkt.

Im Studio öffnen

Episodenseite

Player, dann Shownotes, Kapitel und Transkript in Tabs mit gleitender Linie. Die Suche markiert die Wörter, eine Zeit setzt den Player dorthin.

Im Studio öffnen

Details

Was Podcast mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
4
Version
1.0.0 · seit 1.0.0
Datei
components/ui/podcast.tsx
Bringt mit
utilskitaudio-playerbuttoniconrevealmotionsection
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 20 eigene Texte
Studio
Alle 4 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle PodcastProps aus components/ui/podcast.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    PodcastVariant

    episode-listfeatured-episodeshow-headerepisode-detail

  • eyebrowoptional
    React.ReactNode
  • titlePflicht
    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

Eingebaute Texte

Diese Texte schreibt Podcast selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 20 Texte anzeigen
episodeEnglisch Episode {n}Deutsch Folge {n}
playEnglisch Play {t}Deutsch {t} abspielen
pauseEnglisch Pause {t}Deutsch {t} pausieren
playingEnglisch Now playingDeutsch Läuft gerade
minEnglisch {n} minDeutsch {n} Min.
withEnglisch with {names}Deutsch mit {names}
chaptersEnglisch ChaptersDeutsch Kapitel
notesEnglisch Show notesDeutsch Shownotes
transcriptEnglisch TranscriptDeutsch Transkript
searchEnglisch Search the transcriptDeutsch Im Transkript suchen
hitsEnglisch {n} matchesDeutsch {n} Treffer
noHitsEnglisch No match in this episode.Deutsch Kein Treffer in dieser Folge.
jumpEnglisch Play from {t}Deutsch Ab {t} abspielen
copyFeedEnglisch Copy RSS feedDeutsch RSS-Feed kopieren
feedCopiedEnglisch Feed copiedDeutsch Feed kopiert
openAppEnglisch Open in your podcast appDeutsch In deiner Podcast-App öffnen
latestEnglisch Latest episodeDeutsch Neueste Folge
allEnglisch All episodesDeutsch Alle Folgen
linksEnglisch Links from the episodeDeutsch Links aus der Folge
closeEnglisch Close playerDeutsch Player schließen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-label, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen status, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 2 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Podcast?

Mit aiw add @ai-website/podcast. Der Befehl legt die Datei components/ui/podcast.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind audio-player, button, icon, reveal, motion und section. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Podcast?

4 Varianten, Episodenliste, Neueste Folge, Show-Header und Episodenseite. Du wählst sie mit der Prop variant, zum Beispiel variant="featured-episode".

Kann ich die Texte von Podcast übersetzen?

Ja. Podcast bringt 20 eigene Texte auf Deutsch und Englisch mit, etwa „Läuft gerade“, „Kapitel“ und „Shownotes“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Podcast einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Podcast mit aiw_components und installieren sie mit aiw_add @ai-website/podcast. Nenn im Prompt die Variante, etwa variant="episode-list", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Podcast ohne Code anpassen?

Ja, im Studio. Alle 4 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Podcast-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Podcast stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert