WebberUI

Music Player

Music streaming UI: now playing, playlist grid, scrolling lyrics, play queue.

ProApp UIapp6 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/music-player-app.json?t=<install token>"

The whole page lands in app/templates/music-player-app/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Now Playing

    Top nav bar over the immersive playing view: library sidebar, spinning record, play queue, and a mini player docked at the bottom.

    hero
  2. 2

    Synced Lyrics

    A wall of lyrics scrolling line by line, the line being sung always the brightest.

    content
  3. 3

    Playlist Grid

    A grid of playlist covers curated for every mood, each revealing a play button on hover.

    gallery
  4. 4

    This Week's Charts

    The five most-streamed tracks across the service, with trend arrows and bars that animate in.

    stats
  5. 5

    Premium Plan

    A card listing what upgrading unlocks, with a free-trial call to action.

    pricing
  6. 6

    Footer

    Footer with a brand blurb, social links, and a product navigation column.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →