Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Episode Playlist Features Block for Vue

A features section drawn as a podcast host's episode manager: a show header with its RSS and directory chips, five episode rows with a status badge and downloads, and a mini player docked under the list that follows the chosen row.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A features section for Vue with Ark UI, drawn as the episode manager of a podcast hosting product. A side header at the start says what the product keeps in one list; at the end, a framed manager shows the show's name with RSS and directory chips, five episode rows (title, length, a Published, Scheduled or Draft badge, and downloads) and a mini player docked under the list. Choosing a row moves a highlight to it and the mini player shows that episode's title, a waveform with its playhead and the time. Nothing plays: the player is a drawing and the rows are the controls. The header sticks on large screens, a divider that meets the page's top rule with a plus mark splits the two sides, and each row is two lines on a phone. It's built from Badge, Button and the Guides line kit, with your theme's tokens for every colour and no primary button.

FAQ

How do I change the show and its episodes?

Edit SHOW and EPISODES at the top of the file. Each episode has a title, a length in seconds, a status (PUBLISHED, SCHEDULED or DRAFT), the text its downloads column shows, how far the playhead sits and a seed for its waveform. The summary line ("5 episodes: 2 published, 1 scheduled, 2 drafts") is counted from the list.

Does the mini player play audio?

No. It's a drawing that follows the chosen episode, so it's hidden from assistive technology and has no controls. Wire your own audio element to the same selection if you want real playback.

How does it work from the keyboard?

Each episode row is one button: Tab reaches it and Enter or Space chooses it. The chosen row is marked as pressed, and a polite status line reads out its title, length and status after you choose.

Where does the waveform come from?

It is drawn from a small function that gives each episode its own shape from a seed, using whole-number arithmetic, so it's identical on the server and in every browser. Replace it with your episode's real peaks, as an array of heights in percent.

Is the header sticky on every screen?

Only from the large breakpoint up, where the two sides sit next to each other: the header stays in view while the page scrolls past a tall manager. On a phone the header comes first and the manager follows, so nothing overlaps.

How does it fit on a phone?

The header, the three benefits and then the manager stack in that order. Each row keeps its title and status on the first line and its length and downloads on the second, and long titles are cut with an ellipsis.

All 170 features blocks