# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/podcast54. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-07

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Podcast](/blocks/podcast)
5. /
6. Listening Path Builder

# Listening Path BuilderFREE

An entry point for a back catalogue: three questions score the listening paths, and the winner is handed over as an ordered run of three episodes with cover art, numbers, and a total runtime added up from the episodes themselves.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/podcast54`

## Podcast54: Listening Path Builder

An entry point for a back catalogue. Three questions score the listening paths, and the winner is handed over as an ordered run of three episodes with cover art, numbers, and a total runtime added up from the episodes themselves.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/podcast54"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/podcast54"
```

That installs the block file, the `badge6` eyebrow and `button1` seal CTA it is built from, and the `questionnaire` primitive.

### Quick start

tsxCopy

```
import { Podcast54, podcast54Demo } from "@/components/beste/block/podcast54";

export default function Page() {
  return <Podcast54 {...podcast54Demo} />;
}
```

tsxCopy

```
import { Podcast54 } from "@/components/beste/block/podcast54";

export default function Page() {
  return (
    <Podcast54
      badge={{ label: "Start here" }}
      meta="142 episodes"
      heading="Nobody starts a show at episode one"
      description="Three questions and we hand you an order to listen in."
      shortcuts="numbers"
      image={{
        src: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618",
        alt: "A condenser microphone in a shock mount with a pop filter",
      }}
      caption="Recorded in one room and published on Tuesdays."
      stats={[
        { title: "Median length", value: "38 min" },
        { title: "Published since", value: "2019" },
      ]}
      questions={[
        {
          name: "reason",
          title: "Why are you here?",
          choices: [
            // what this answer asks a path for
            { value: "craft", label: "I want to get better at the work", traits: ["craft"] },
            { value: "people", label: "I like hearing how people think", traits: ["people"] },
          ],
        },
        {
          name: "time",
          title: "How long is your commute?",
          choices: [
            { value: "short", label: "Under half an hour", traits: ["short"] },
            { value: "long", label: "Long enough for a proper one", traits: ["long"] },
          ],
        },
      ]}
      paths={[
        {
          title: "The one about doing the work",
          summary: "Three episodes on process, in the order that makes the third one land.",
          traits: ["craft", "short"],
          episodes: [
            {
              number: "31",
              title: "The brief nobody reads",
              minutes: 34,
              note: "Why the document everyone signs is never opened again.",
              image: {
                src: "https://images.unsplash.com/photo-1590602847861-f357a9332bbc",
                alt: "A dynamic microphone on a boom arm against a dark backdrop",
              },
            },
          ],
          button: { label: "Start with episode 31", href: "https://beste.co" },
        },
      ]}
      labels={{ submit: "Build my path", totalLabel: "Three episodes" }}
    />
  );
}
```

### Props

| Prop        | Type                                 | Default | Description                                                      |
| ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------- |
| badge       | Badge                                | –       | Eyebrow above the rule, rendered with Badge6.                    |
| meta        | string                               | –       | Short line beside the eyebrow, across the hairline divider.      |
| heading     | string                               | –       | Section heading.                                                 |
| description | string                               | –       | Section description under the heading.                           |
| questions   | PathQuestion\[\]                     | \[\]    | The questions, in the order they are asked.                      |
| shortcuts   | "letters" \| "numbers"               | –       | Prints a shortcut on every choice of the active question.        |
| paths       | Path\[\]                             | \[\]    | Scored against the answers; the highest score wins.              |
| image       | CoverImage                           | –       | Standing photograph beside the questions.                        |
| caption     | string                               | –       | Line under the standing photograph.                              |
| stats       | { title: string; value: string }\[\] | \[\]    | Two bordered cells under the photograph.                         |
| labels      | Podcast54Labels                      | {}      | Overrides for the buttons, the path heading, and the time units. |
| className   | string                               | –       | Merged onto the section element.                                 |

tsCopy

```
type Badge = { label: string };
type ActionButton = { label: string; href: string };
type CoverImage = { src: string; alt: string };

type PathQuestion = {
  name: string;
  title: string;
  description?: string;
  choices?: PathChoice[];
  multiple?: boolean;
};

type PathChoice = {
  value: string;
  label: string;
  description?: string;
  traits?: string[];
};

type Episode = {
  number: string;
  title: string;
  minutes: number;
  note: string;
  image: CoverImage;
};

type Path = {
  title: string;
  summary: string;
  traits?: string[];
  episodes?: Episode[];
  button?: ActionButton;
};

type Podcast54Labels = {
  previous?: string;
  next?: string;
  submit?: string;
  restart?: string;
  pathTitle?: string;
  totalLabel?: string;
  episodeLabel?: string;
  hour?: string;
  minute?: string;
};
```

### Behavior notes

* Scoring is one point per trait. Every picked answer contributes its `traits`, and each path scores the number of them it carries, so a path can win on two of three answers rather than having to match all of them.
* Ties go to the first path in the array, which makes the order of `paths` your tie-breaker: put the safest starting point first.
* The result is an order, not a single recommendation. The index chip is the position in the path, while `number` is the episode's own number in the catalogue, so the two never have to agree.
* The runtime is summed from the episodes rather than written by hand, so editing an episode's `minutes` keeps the total honest. It is formatted without a locale API, which would risk a server and client mismatch.
* The whole section swaps: the questions and the standing photograph give way to the rail. Answer again brings both back with nothing filled in.
* The questions sit directly on the page rather than inside a bordered panel. One question is on screen at a time, so a box around it is mostly empty; the bordered choices and the photograph beside them carry the structure instead.
* Three episodes is a layout decision, not a limit. A path with four renders four cards, though the grid reads best at three.

## More Podcast blocks

[View all Podcast](/blocks/podcast)

[](/block/podcast52)

PRO

podcast52

### About Section with Stats Card

Podcast overview section with cover art, stats grid (episodes, launch date, listeners, awards), and expandable long description. Perfect for show about pages and media kit sections.

[](/block/podcast41)

PRO

podcast41

### Transcript Viewer with Search

Searchable episode transcript with clickable timestamps, speaker labels, and download option. Perfect for podcast accessibility features and content discovery.

[](/block/podcast53)

PRO

podcast53

### Player And Episode List

A podcast section with an eyebrow over a hairline rule and a two-column heading, pairing an image tile that floats a live audio player with a divided episode list.

[](/block/podcast2)

PRO

podcast2

### Player Card with Waveform Visualization

Audio player card featuring cover art, animated waveform visualization, play/pause controls, and progress tracking. Perfect for embedded podcast players on show pages.

[](/block/podcast4)

PRO

podcast4

### Episode Detail with Show Notes

Detailed episode page with cover art, duration, publish date, numbered show notes, and host/guest profiles. Perfect for individual episode pages that provide comprehensive content information.

[](/block/podcast1)

PRO

podcast1

### Hero with Cover Art and Video Modal

Two-column podcast hero featuring cover art with video modal, host info, episode count, and latest episode card. Perfect for podcast landing pages that highlight show branding and recent content.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.