Staaarter

Podcast Launch Teaser

A two-column pre-launch teaser for a new podcast. One side shows a badged square cover-art tile, the other carries the show title, description, a subscribe button, a row of platform links, and a ruled list of the first few episodes with their runtimes.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/podcast-launch-teaser.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon42.tsx instead.

Usage

The file also exports comingsoon42Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon42, comingsoon42Demo } from "@/components/blocks/coming-soon/comingsoon42";

export default function Page() {
  return <ComingSoon42 {...comingsoon42Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
badgeLabelstring"New podcast"Badge overlaid on the cover-art tile.
headingstring"The Build Log"Show title.
descriptionstring"A weekly show about building products that last..."Supporting copy under the heading.
subscribeLabelstring"Subscribe"Label for the subscribe button.
platformsPlatformLink[]noneListening-platform links shown as a row of text links.
episodesPodcastEpisode[]noneFirst few episodes shown as a ruled list.
coverMediaSlotImagenoneSquare cover-art image shown on the opposite side.
classNamestringnoneExtra classes for the outer section element.

Types

export interface PodcastEpisode {
  number: number;
  title: string;
  duration: string;
}

export interface PlatformLink {
  label: string;
  href: string;
}

Behavior notes

  • Fully static Server Component, no client state anywhere.
  • The "Subscribe" button and platform links are decorative placeholders, they don't have real onClick handlers, though the platform links do render as real `<a>` tags pointing at their given `href`.
  • The cover-art tile uses the shared `MediaSlot` helper and falls back to a placeholder if no image is supplied.