Skip to content
Pod Engine
Get started

Components

Every building block, shown with real Pod Engine data at the size it’s used. Resize to 375px: each one is designed for the phone first.

  1. 01 Actions
  2. 02 Labels and marks
  3. 03 Structure
  4. 04 Show data
  5. 05 Search and results
  6. 06 AI and API
  7. 07 Page furniture
  8. 08 Page sections
  9. 09 Tables and data pages
  10. 10 Articles and content
  11. 11 Plans and code

All 56 components, by category

action
commerce
content
data
developer
layout
mark
navigation
proof
search
01 Actions

Things you can click

Icon

@/ui/components/Icon.astro

Inline stroke icons, 24px grid, currentColor. Decorative unless you pass a label.

search play mail globe code rss mic arrow-right arrow-down menu close check up down external
02 Labels and marks

Small things that carry colour

Label

@/ui/components/Label.astro

Short status words on a soft chapter fill: Estimated, Beta, High confidence.

Show profile Estimated High confidence 60+ fields Refreshed daily Ad read

Sticker

@/ui/components/Sticker.astro

A tilted launch tag on a heading or card corner. One per section.

Don’t: use it for status; that’s a Label.

BETA NEW Live Free

Stamp

@/ui/components/Stamp.astro

A dated stamp on a data card: when the numbers were pulled.

Pulled 1 Oct 2026

Shape

@/ui/components/Shape.astro

Ink-outlined shapes that peek from behind a section. Two per section at most; hidden on phones.

Don’t: put a shape over text or inside a card.

Shapes are hidden below 768px.

Paperclip

@/ui/components/Paperclip.astro

Clips one card per page to the section, as if pinned on. Decorative.

Sponsors in the last 10 episodes

03 Structure

Bands, headers, cards and tabs

Section

@/ui/components/Section.astro

One band of a page. Bands alternate paper and white; at most one dark band per page.

This page is built from Sections: each chapter here is one. The dark band is shown under AI and API.

ChapterHeader

@/ui/components/ChapterHeader.astro

The top of every homepage section: numbered disc, label, the h2, one line of lead.

05 Sponsors BETA

See who sponsors which shows

Real ad reads, found in the audio, with the brand’s logo.

For brands

Card

@/ui/components/Card.astro

plain for lists, offset for anything you can act on, feature for the one panel a section is about.

plain

offset

feature

Tabs

@/ui/components/Tabs.astro

Switch panels with no JavaScript. The hero uses it to show what Pod Engine does for each paying group.

Show me what it does for

Who sponsors My First Million, and how often: 2 ad reads in the latest episode.

Every mention of your client, with the quote and the minute it was said.

The same data over MCP, the API and SDKs.

Your show’s listeners, charts and ratings, in one record.

04 Show data

Numbers that prove it

Cover

@/ui/components/Cover.astro

The show’s own cover art, always. Every size reserves its space, so nothing shifts.

Don’t: use a stock image or a guessed cover.

Lenny’s Podcast My First Million The Diary Of A CEO This Week in StartupsMarketing Against The GrainLittle TalksYoung and Profiting This Week in Startups GL

StatTile

@/ui/components/StatTile.astro

One number and what it means. Estimates carry a qualifier. Missing data says so instead of showing zero.

1.12M monthly listeners Estimated
956K YouTube subscribers
#86 Spotify US · business
Not enough signal yet downloads per episode

SplitBar

@/ui/components/SplitBar.astro

How a total divides, such as audio vs YouTube listeners. Labels carry the numbers, so it reads without colour.

Audio 391K YouTube 140K

RatingBar

@/ui/components/RatingBar.astro

Ratings per platform: the average, and a bar sized by how many people rated.

4.9 Apple
1,414
4.9 Spotify
5,408

ChartLine

@/ui/components/ChartLine.astro

Chart positions over time, server-drawn SVG. #1 is at the top.

Lenny’s Podcast · Apple Podcasts · Technology · US

#20 #28 #35 3 Sep 10 Sep 17 Sep 24 Sep 1 Oct

Apple Podcasts · Business · US

#1 #11 #20 3 Sep 10 Sep 17 Sep 24 Sep 1 Oct
Young and Profiting #3 Scale It Lab #4 The Diary Of A CEO #18

Movement

@/ui/components/Movement.astro

Up or down since last week, with an arrow and words, never colour alone.

Young and Profiting 1 The Diary Of A CEO 4 Lenny’s Podcast –

LogoChip

@/ui/components/LogoChip.astro

A sponsor with its real logo and how often it appeared.

WorkOS 10/10 Mercury 9/10 DX 1/10
WorkOS 10/10 Mercury 9/10 DX 1/10

LogoChip

@/ui/components/LogoChip.astro

Every logo we serve, from our own CDN (lib/logos.ts). SVG wherever one exists; PNGs are marked for replacement.

Don’t: link a favicon service or a brand's own site.

  • Claude
  • ChatGPT
  • Anthropic
  • Model Context Protocol
  • Cursor
  • npm
  • Python
  • Snowflake
  • Google Sheets
  • Gmail
  • Slack
  • HubSpot
  • Apple Podcasts
  • Spotify
  • YouTube
  • Castbox
  • RSS
  • Instagram
  • TikTok
  • LinkedIn
  • X
  • beehiiv
  • WorkOS PNG
  • Mercury
  • DX
  • Shopify
  • Walmart
  • Indeed
  • AT&T
  • FreshBooks
  • Odoo
  • Hampton
  • Honeylove
  • Lightfield
  • AG1 PNG
  • Mindstone PNG
  • Northwest Registered Agent PNG
  • Plaud PNG
  • Somewhere PNG

PersonChip

@/ui/components/PersonChip.astro

A guest or host: initials on a chapter colour until we have an approved photo.

Molly Graham Glue Club Peter Sellis ex-Snap, Discord Anish Acharya a16z Tara Seshan OpenAI
05 Search and results

Search that works before JS loads

ResultRow

@/ui/components/ResultRow.astro

One episode in a result list: cover, show, title, date, the matching quote.

How AI Is Empowering One-Person Companies Ad read

Marketing Against The Grain · 15 Sep 2026

“Have you heard of HubSpot? HubSpot is a CRM platform…”

HubSpot’s UNBOUND 2026 Preview

Little Talks · 9 Sep 2026

“When the HubSpot folks do theirs, generally pretty on point and doesn’t always come back to selling something…”

How we scaled to $100M in under a year

My First Million · 7 Sep 2026 · 53:44 · 2 ad reads

Apple YouTube

ProofRow

@/ui/components/ProofRow.astro

The index’s headline numbers, straight under the hero. Only live numbers.

147.8M
episodes indexed
7.4M
full transcripts, searchable
1.39M
ad reads detected
694
episodes mention HubSpot since 1 Sep
06 AI and API

The dark band

One per page at most. Used for the MCP and API chapter.

ChatPanel

Which shows did HubSpot sponsor in September?

In the episodes I checked, HubSpot read ads on:

  • My First Million, 2 of the last 10 episodes (9 and 14 Sep)
  • Marketing Against The Grain, 15 Sep

694 episodes mention HubSpot since 1 Sep; most are editorial, not ads.

Claude, with the Pod Engine MCP connector

CodePanel

POST /api/v1/search/episodes 200 OK · 212 ms 
{
  "searchTerm": "HubSpot",
  "publishedSince": "2026-09-01",
  "adReadsOnly": true
}
npm i @podengine/sdk
07 Page furniture

FAQ, call to action, nav and footer

ChatPanel

@/ui/components/ChatPanel.astro

The same panel on paper.

Which shows did HubSpot sponsor in September?

In the episodes I checked, HubSpot read ads on:

  • My First Million, 2 of the last 10 episodes (9 and 14 Sep)
  • Marketing Against The Grain, 15 Sep

694 episodes mention HubSpot since 1 Sep; most are editorial, not ads.

ChatGPT, with the Pod Engine MCP connector

Faq

@/ui/components/Faq.astro

Questions in <details>, crawlable when closed, with FAQPage schema from the same props.

How accurate are the listener estimates?

They’re estimates, not download counts. Each one comes with a confidence level and the signals behind it.

Which shows have transcripts?

7.4M episodes so far, with the biggest shows first. You can request a transcript for any episode and we’ll add it.

Is there a free plan?

Searching is free. You pay for contacts, exports, alerts and the API.

How accurate are the listener estimates?

They’re estimates, not download counts. Each one comes with a confidence level and the signals behind it.

Which shows have transcripts?

7.4M episodes so far, with the biggest shows first. You can request a transcript for any episode and we’ll add it.

Is there a free plan?

Searching is free. You pay for contacts, exports, alerts and the API.

CtaPanel

@/ui/components/CtaPanel.astro

The last thing on a page: one sentence, one action.

Start researching podcasts in seconds

Free to search. Pay when you need contacts, exports or the API.

Get started See pricing

Shell

@/ui/components/Shell.astro

The frame of every page: html, head basics, skip link, Nav, main, Footer. Kinds: hub, data, article, tool.

This page uses kind="hub".

08 Page sections

Heroes, features and sequences

PageHero

@/ui/components/PageHero.astro

The top of every page except the homepage, with the page’s one h1. Split with a proof object, or centred.

It renders the page’s h1, so it is shown in the templates: split, centred.

FeatureSplit

@/ui/components/FeatureSplit.astro

One feature as a row: words on one side, real proof on the other. Alternate sides down a section with FeatureRows.

Don’t: use a screenshot of the old app or a stock image as the media.

Audience

How many people listen, and where

  • An estimate with a confidence level
  • Audio and YouTube counted separately
532K Lenny’s Podcast, listeners a month Estimated · Medium confidence
Charts

Chart positions, with history

  • Apple Podcasts and Spotify
  • History, not just today
#20 #28 #35 3 Sep 10 Sep 17 Sep 24 Sep 1 Oct

FeatureRows

@/ui/components/FeatureRows.astro

The stack around FeatureSplit rows: even spacing and dividers. Shown above.

Three to five rows per section.

Steps

@/ui/components/Steps.astro

A short sequence where order matters: how it works, getting started.

  1. 1

    Create a key

    Copy your API key from the developer settings.

  2. 2

    Install the SDK

    JavaScript or Python, or call the REST API.

    npm i @podengine/sdk
  3. 3

    Make a call

    Ask for the latest Business chart.

    GET /api/v1/charts/latest

Quote

@/ui/components/Quote.astro

A real customer’s words, approved in writing.

Don’t: invent, paraphrase or stitch quotes. The text below is a layout specimen, not a quote.

Specimen text: an approved customer quote goes here, word for word, ideally with a number in it.
Customer Name Role, Company

AsideLayout

@/ui/components/AsideLayout.astro

A main column with a side column, sticky from desktop. Articles (contents left) and data pages (sources right).

Shown in the data and article templates.

09 Tables and data pages

Rankings, facts and where they came from

KeyFacts

@/ui/components/KeyFacts.astro

The handful of numbers that define one thing, at the top of a data page.

Listeners a month
532K
Estimated · Medium
YouTube views
21.5M
Apple rating
4.9
1,414 ratings
Downloads
Not enough signal yet

RankTable

@/ui/components/RankTable.astro

A ranked list with numbers and movement; ItemList schema on chart and best-of pages.

Apple Podcasts · Business · United States, 1 Oct 2026
# Show Move Last episode
1 REAL AF with Andy Frisella Andy Frisella 29 Sep
2 Unblinded with Sean Callagy Sean Callagy 29 Sep
3 Young and Profiting with Hala Taha Hala Taha 1 30 Sep
4 Scale It Lab Charles Schwartz 4 9 Sep
5 Pitch Me Kayvon Kay 1 Oct

ComparisonTable

@/ui/components/ComparisonTable.astro

Pod Engine against an alternative, or plans against each other. Claims about others must be checkable.

Pod Engine API compared with scraping
Feature Pod Engine API Scraping it yourself
Listener estimates Yes –No
Chart history Yes From the day you start
Upkeep None Yours

Sparkline

@/ui/components/Sparkline.astro

A tiny line beside a number. Chart positions invert, so up means a better rank.

Young and Profiting #3 Lenny’s Podcast #26 A new show Not enough history yet

Freshness

@/ui/components/Freshness.astro

When the data was updated, its source, and a ready-made citation for journalists.

Updated Source: Apple Podcasts

Cite this

Pod Engine, “Top business podcasts on Apple Podcasts in the US”, 1 Oct 2026, https://www.podengine.ai/podcasts/charts/apple/us/business

When data is missing

Every data component has a sparse state. Show it honestly; never a zero or a guess.

Not enough signal yet downloads per episode
GL No cover yet: initials, never a stock image.
Listeners a month
Not enough signal yet
Apple rating
4.9
12 ratings
YouTube views
Not enough signal yet
Not enough history yet
A chart where we lack last week and some covers
# Show Last episode
1 A show without a cover in our index 30 Sep
2 Unblinded with Sean Callagy 29 Sep

DataSources

@/ui/components/DataSources.astro

Where the numbers come from and how fresh they are. End of every data page.

Where this data comes from

  • Apple Podcasts Chart positions 1 Oct 2026
  • Pod Engine Show profiles 1 Oct 2026
10 Articles and content

Long-form text that stays on the system

ArticleHeader

@/ui/components/ArticleHeader.astro

Breadcrumbs, h1, standfirst and byline with dates for articles and guides.

It renders the h1, so it is shown in the article template.

Prose

@/ui/components/Prose.astro

Styles Markdown or CMS HTML on tokens: headings, lists, links, quotes, code and tables.

Pod Engine estimates about 532K listeners a month for Lenny’s Podcast, with medium confidence.

  • 391K on audio apps
  • 140K on YouTube

Call it with pe.charts.getLatestChart().

Callout

@/ui/components/Callout.astro

A short aside in running text: note, tip, method, beta, caveat.

LogoCloud

@/ui/components/LogoCloud.astro

Where Pod Engine works (logos) or who uses it (names as text until logos are approved). No marquee.

Works with

  • Claude
  • ChatGPT
  • Cursor
  • npm
  • Python
11 Plans and code

Pricing and developer blocks

PlanCards

@/ui/components/PlanCards.astro

Plans with a billing switch that needs no JavaScript. Prices come from the catalog.

Billing period

  • Free

    For trying Pod Engine on real shows.

    Free

    Free

    • Podcast search
    • Charts and show profiles
    Start free

  • Core Platform

    For teams that research, buy or monitor podcasts.

    $100 a month

    $50 a month, billed annually save 50%

    • Transcript search
    • Audience estimates
    • API and MCP
    Get started

SignupCard

@/ui/components/SignupCard.astro

A compact sign-up prompt for a side column. The full-width one is CtaPanel.

CodeTabs

@/ui/components/CodeTabs.astro

The same call in curl, JavaScript and Python, switched with no JavaScript.

GET /api/v1/charts/latest
Language 
          curl "https://api.podengine.ai/api/v1/charts/latest?chartType=apple&country=us&category=business" \
  -H "Authorization: $PODENGINE_API_KEY"
        
          import { PodEngine } from '@podengine/sdk';

const pe = new PodEngine({ apiKey: process.env.PODENGINE_API_KEY! });
const chart = await pe.charts.getLatestChart({ chartType: 'apple', country: 'us', category: 'business' });

npm i @podengine/sdk

          import os
from podengine import PodEngine

pe = PodEngine(api_key=os.environ["PODENGINE_API_KEY"])
chart = pe.charts.get_latest_chart(chart_type="apple", country="us", category="business")

pip install podengine