Does Podcast Episodes work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Podcast Episodes

Podcast block with show art, an episode list and a player with a live visualiser and scrubber.

Type: Media section
Styles: Dark, Minimal
Licence: Charcoal UI Pro

About Podcast Episodes

Podcast Episodes shows the show artwork, platform links and an episode list, with a player on top that plays any episode, shows a live visualiser and lets listeners scrub.

It is a full-width media section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.

When to use Podcast Episodes

Podcasts and audio shows.
Internet radio stations.
Audiobook and lecture series.
Company podcasts.

How it is built

Uses Audio Visualizer in simulated mode until you connect real audio, and the show, cover, episodes and platforms are props.

It is composed from Audio Visualizer, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Podcast Episodes

Podcast Episodes is part of 2 full templates, so you can see it in a finished page.

Off the Clock template: A home for a show and its listeners.
Frequency template: Listener-funded radio, live worldwide.
Video Library: A React course video library with progress bars, levels and hover play
Music Album: A React album release section with a sliding, spinning vinyl and tracklist
Audio Visualizer: A React audio visualizer: bars, wave or ring driven by Web Audio or a synthetic beat

Install Podcast Episodes

npx shadcn@latest add @charcoal/podcast-episodes

Podcast Episodes is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Podcast Episodes work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Audio Visualizer: Bars, a waveform or a ring driven by an AnalyserNode when given an audio element, or by a synthetic beat otherwise, with levels that ease down so it breathes instead of flickering.

Podcast Episodes as Markdown