@podcasts/ui

Offline development surface

All 38 components.
No live API.

Every scenario renders the real public component using sanitized, hardcoded production-seeded snapshots and clearly labeled synthetic control states.

38 public exports 127 documented scenarios 0 runtime API calls

Component catalog

38 components

Every public export has an isolated route and multiple deterministic scenarios.

AffiliateCard

content

Sponsored-content card with explicit labeling, bundled imagery and a local action callback.

4 scenarios

Artwork

content

Responsive podcast artwork with badge, priority loading and a deterministic fallback state.

4 scenarios

AudioPlayer

audio

Complete responsive episode player composition with progress, transport, share and minimize controls.

4 scenarios

AudioProgress

audio

Accessible seek slider showing current, buffered and total episode playback time.

4 scenarios

BlogPost

content

Long-form editorial article with breadcrumbs, dates, image and trusted rendered body content.

4 scenarios

BlogPostCard

content

Linked editorial preview combining bundled artwork, metadata, title and excerpt.

4 scenarios

BlogPostList

content

Responsive article-card collection with populated, empty and long-title scenarios.

3 scenarios

Breadcrumbs

navigation

Accessible hierarchical navigation trail supporting links, current labels and Unicode content.

4 scenarios

Button

feedback

General-purpose Svelte button covering variants, sizes, pressed, loading and disabled behavior.

3 scenarios

ContinueListening

audio

Resume-listening card with episode artwork, progress, playback and dismiss actions.

4 scenarios

CookieConsentModal

feedback

Cookie preference dialog with synthetic settings, save and accept-all interactions.

3 scenarios

EpisodeCard

content

Episode row with artwork, publication metadata, active playback state and local action callbacks.

4 scenarios

EpisodeList

content

Episode collection rendering production-seeded, empty and multilingual content states.

3 scenarios

ExpandableText

content

Clamped plain or trusted HTML description with an interactive read-more disclosure.

4 scenarios

Footer

layout

Site footer composition with brand information, navigation groups, legal links and optional signup.

3 scenarios

FullBleedImage

layout

Full-width bundled artwork treatment with configurable overlay and slotted foreground content.

3 scenarios

Header

navigation

Responsive sticky site header with navigation, active state, search region and mobile menu.

3 scenarios

HeroSection

layout

Flexible hero composition supporting eyebrow, long title, actions, content and media regions.

3 scenarios

MiniPlayerControls

audio

Compact playback, expand and close button group with an interactive event readout.

3 scenarios

Modal

feedback

Dismissible accessible dialog shell with optional body, description and footer snippets.

3 scenarios

PageShell

layout

Page-level layout wrapper arranging optional header, metadata, wide content and footer regions.

3 scenarios

Pagination

navigation

Accessible previous, next and numbered-page navigation with safe boundary handling.

3 scenarios

PendingSignup

feedback

Newsletter signup form covering editable, submitting and successful synthetic states.

3 scenarios

Pill

navigation

Compact taxonomy control supporting links, selected state, custom content and removal.

3 scenarios

PlayerControls

audio

Playback transport controls for pause, skip, speed selection and disabled media states.

4 scenarios

PlayerMinimizeButton

audio

Single-purpose control toggling the full player between minimized and expanded states.

3 scenarios

PodcastCard

discovery

Linked podcast tile combining bundled cover, public title, author and optional day label.

4 scenarios

PodcastGrid

discovery

Adaptive podcast collection selecting simple, featured or asymmetric layouts by item count.

3 scenarios

PodcastGridAsymmetric

discovery

Nine-item editorial podcast layout balancing a six-card group and a stacked side column.

3 scenarios

PodcastGridFeatured

discovery

Featured podcast composition pairing one prominent item with a supporting small-card group.

3 scenarios

PodcastGridSimple

discovery

Straightforward responsive grid for small podcast sets, empty input and Unicode titles.

3 scenarios

PodcastList

discovery

Compact podcast list with bundled artwork, public metadata and an explicit empty state.

3 scenarios

Popover

feedback

Anchored disclosure surface with controlled open state, placement and local callbacks.

3 scenarios

SearchBar

navigation

Debounced search interface backed only by deterministic in-memory podcast and episode fixtures.

3 scenarios

Section

layout

Reusable content section with eyebrow, heading, description, actions and child content.

3 scenarios

ShareMenu

audio

Episode share disclosure with local clipboard behavior and precomposed social share links.

3 scenarios

SponsorGrid

content

Partner collection covering text, bundled image and trusted image-text presentation modes.

3 scenarios

SpotifyEmbed

audio

Spotify episode embed component shown in explicit offline preview mode without loading Spotify.

4 scenarios