A Music App Block at a Glance
This block is a full-screen streaming interface: a sidebar with navigation and playlists on the left, a searchable track browser in the center, and a persistent player bar pinned to the bottom. Tracks show artwork, artist, and duration, playlists show cover art and counts, and the player exposes the full transport: play, pause, previous, next, shuffle, repeat, seek, and volume.
Unlike most UI demos, the player is real. It drives an actual HTML audio element, so pressing play produces sound, the progress bar tracks genuine playback time, and when a song ends the app advances to the next track, or a random one when shuffle is on.
Streaming UIs and Other Fits
The direct use case is any music product: a streaming service, an artist site with a discography player, a label showcasing releases, or a royalty-free audio marketplace. The same shell adapts to adjacent audio products too, and its close cousin in this collection, the podcast app, shows how the pattern translates to episodic content.
It also works as an embedded feature rather than a whole product: a meditation app's session player, a language course's listening exercises, or a game studio's soundtrack page can all borrow the browser-plus-player-bar layout.
Real Audio, Real State
All playback state lives in React hooks: the current track index, playing flag, current time, duration, volume, mute, shuffle, repeat, and a Set of liked track ids. A ref points at the hidden audio element, and event listeners for time updates, metadata, and track end keep the UI synchronized with actual playback. Refs mirror the shuffle and repeat flags so the end-of-track handler always reads fresh values.
The seek bar and volume control are Shadcn UI sliders, with the seek slider stretched across the top of the player bar as a slim progress strip. Volume hides inside a popover to keep the bar compact, and a search input filters the track list as you type.
Skinning the Player for Your Brand
The interface is painted entirely with Shadcn UI design tokens: card backgrounds for the player bar, muted tones for inactive controls, and primary for active states like an engaged shuffle button. Since the tokens are CSS variables in globals.css, a palette change re-skins the whole app, and dark mode follows your theme class automatically.
Layout is responsive Tailwind. On desktop the sidebar sits beside the browser; on mobile it moves into a slide-out sheet triggered from a menu button, so track browsing keeps the full screen width.
Components, Framework Editions, and Setup
The block composes Shadcn UI buttons, inputs, sliders, popovers, avatars, separators, and sheets with lucide-react icons for the transport controls. It ships in React, Vuejs, and Svelte versions, the Vuejs edition building on shadcn-vue and the Svelte edition on shadcn-svelte, so the same player works across all three ecosystems.
Install via the shadcn CLI command at the top of the example page, in npm, pnpm, yarn, or bun form, or copy the four source files from the code tab. As a pro block, code and CLI access come with an All Access plan, covered on the pricing page. To go live, swap the sample track array for your catalog, point each track's src at your audio files or streaming URLs, and persist likes to your backend.