WebberUI

Band Tour Site

Indie band site: tour dates, latest album, music videos, merch, fan newsletter.

ProIndustrymusic7 sections
See it liveSee the plans

Install

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

The whole page lands in app/templates/music-band-tour/. 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

    Nav Bar and Hero

    Neon-styled nav bar, the band name set huge, a now-playing card, and a scrolling announcement band.

    hero
  2. 2

    Tour Dates

    Seven cities listed by date, each with its venue, an on-sale status badge, and a ticket button.

    timeline
  3. 3

    Discography

    Three flippable record cards; click one to turn it over for the full tracklist and runtimes.

    gallery
  4. 4

    Videos

    A grid of music videos, live recordings, and tour behind-the-scenes, with the featured film in a large slot.

    gallery
  5. 5

    Tour Merch

    Four tour-exclusive merch cards with tags, prices, favouriting, and add to cart.

    product
  6. 6

    Fan Newsletter Signup

    A sign-up form beside the list of member perks, switching to a confirmed state once submitted.

    form
  7. 7

    Footer

    Band blurb, social links, three columns of navigation, and the copyright line.

    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 →