Does Music Album work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Music Album

Album release: a sleeve whose vinyl slides out and spins while a track plays, beside the tracklist.

Type: Media section
Styles: Dark, Minimal
Licence: Charcoal UI Pro

About Music Album

Music Album presents a release: the sleeve with a record peeking out, which slides further and spins when a track plays, beside the album title, label, tracklist and streaming links.

It is a full-width media section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.

When to use Music Album

Bands and musicians.
Record labels and clubs.
Internet radio album picks.
Soundtrack and podcast releases.

How it is built

The vinyl grooves are CSS gradients, the spin pauses when nothing plays and respects reduced motion, and tracks take a title, length and optional feature.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Music Album

Music Album is part of 3 full templates, so you can see it in a finished page.

Groove template: One great record, every month.
Halden template: A band site: album, tour, merch.
Frequency template: Listener-funded radio, live worldwide.
Podcast Episodes: A React podcast section with artwork, episode list and a live player
Video Library: A React course video library with progress bars, levels and hover play

Install Music Album

npx shadcn@latest add @charcoal/music-album

Music Album is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Music Album work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Music Album as Markdown