Off the Clock: Podcast template
A home for a show and its listeners.
For podcasts and audio shows: a rotating-word hero, episodes with a working player, a listener wall, a newsletter archive and press quotes.
About the Off the Clock template
Off the Clock is a home for a show and its listeners. A rotating hero, an episode list with a working player and visualiser, a listener wall, a show-notes newsletter archive and press quotes.
A home for a show and its listeners. It is a complete podcast landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.
Who Off the Clock is for
- Interview and business podcasts.
- Company podcasts.
- Audio documentaries.
- Radio shows with archives.
What is inside
7 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Rotating: A headline whose last word rolls through options, an email capture and avatar social proof.
- Podcast Episodes: Podcast block with show art, an episode list and a player with a live visualiser and scrubber.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- Footer Minimal: One quiet row: brand, a few links and the year.
How it is built
Episodes and platforms are props; connect real audio to the player when you're ready. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Off the Clock
npx shadcn@latest add @charcoal/offclockTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Off the Clock for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Off the Clock a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Rotating: A headline whose last word rolls through options, an email capture and avatar social proof.
- Podcast Episodes: Podcast block with show art, an episode list and a player with a live visualiser and scrubber.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- Footer Minimal: One quiet row: brand, a few links and the year.