Halden: Musician template
A band site: album, tour, merch.
For bands and artists: a film-still hero, the new album with a spinning record, tour dates by leg, a tour-photo filmstrip, a ticket CTA and a contact footer.
About the Halden template
Halden is a band site. A film-still hero, the new album with a spinning record and tracklist, tour dates grouped by leg, a tour-diary filmstrip, a tearable presale ticket and a footer for booking and press.
A band site: album, tour, merch. It is a complete musician landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.
Who Halden is for
- Bands and solo artists.
- DJs and producers.
- Record labels.
- Composers and orchestras.
What is inside
7 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Film: Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- Music Album: Album release: a sleeve whose vinyl slides out and spins while a track plays, beside the tracklist.
- Event Schedule: Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- Gallery Filmstrip: A strip of 35mm film with sprocket holes and frame numbers, plus a large view of the chosen frame.
- CTA Ticket: RSVP block where visitors tear a ticket along its perforation to claim a seat.
- Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.
How it is built
Tour dates use the agenda section, with each leg as a tab. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Halden
npx shadcn@latest add @charcoal/haldenTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Halden for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Halden a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Film: Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- Music Album: Album release: a sleeve whose vinyl slides out and spins while a track plays, beside the tracklist.
- Event Schedule: Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- Gallery Filmstrip: A strip of 35mm film with sprocket holes and frame numbers, plus a large view of the chosen frame.
- CTA Ticket: RSVP block where visitors tear a ticket along its perforation to claim a seat.
- Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.