Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Episode List Footer Block for Svelte

A podcast footer with episode rows, a length on each, and a read-only RSS address you can copy.

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 show footer for Svelte with Ark UI, for Wrenby, a weekly interview podcast. Hairline cells hold the wordmark and one sentence, two link columns in a nav labelled Footer, then the latest episodes: a number, a title, a length and a Listen link. Under them, a read-only field labelled Subscribe in your app carries the RSS address, with a Copy Button. The episode count, the numbers and the lengths are worked out from the episode list. There are no show-platform names and no calendar dates. A legal band closes the page. It's built from Copy Button, Field, Input and Guides.

FAQ

How do I change the episodes?

Edit EPISODES. Each entry is a title and minutes. The row number is its place in the list, the count in "from this season" is the length of the list, and the time element's duration is PT plus the minutes. There is no date. Add or remove an entry and the rows and the count follow. GROUPS and LEGAL are the columns and the policies.

What does the copy button copy?

RSS_URL, the address in the field, and nothing else. The button's label is "Copy address". On success it shows a check for three seconds and a polite status says "RSS address copied". If the browser refuses the clipboard (a page not served over HTTPS), it shows a cross and says "Couldn't copy".

Does the address field submit anything?

No. The input is read-only, there is no form, and the button only writes the address to the clipboard. It does not send it anywhere. The label "Subscribe in your app" is tied to the input.

Why are there no app names?

The field is the show's own RSS address, so a listener can paste it into whichever app they already use. Naming a platform would date the footer. The listen links on the episodes say Listen, and the columns say Show and Visit.

How does it fit on a phone?

The wordmark comes first, then the two columns (side by side from sm), then the episode heading, then one row per episode with the length under the title and Listen at the end, then the address with the copy button under it on a narrow screen, then the legal row. From lg the wordmark sits beside the two columns. Nothing scrolls sideways at 320 pixels.

Where does the copyright year come from?

It is the current year, read when the footer renders, so it never goes stale. The component has no state; the year is read when it renders.

All 100 footer blocks