Groove: Record club template
One great record, every month.
For music, vinyl and media subscriptions: an album hero with a spinning record, a pick-your-records bundle, membership tiers, reviews and a chat FAQ.
About the Groove template
Groove is for music and media subscriptions. The record of the month spins out of its sleeve, back-catalogue add-ons build a bundle, membership tiers, member reviews and a chat FAQ make joining easy.
One great record, every month. It is a complete record club landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.
Who Groove is for
- Vinyl and record clubs.
- Book and magazine subscriptions.
- Music labels.
- Curated media boxes.
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.
- Music Album: Album release: a sleeve whose vinyl slides out and spins while a track plays, beside the tracklist.
- Commerce Bundle: Build-a-box bundle with drawn coffee bags and a progress bar that unlocks bigger discounts.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
- FAQ Chat: FAQ as a support chat: tap a question and a teammate types the answer back.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
How it is built
Album, tracks, add-ons and tiers are all props. 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 Groove
npx shadcn@latest add @charcoal/grooveTemplates 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 Groove for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Groove 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.
- Music Album: Album release: a sleeve whose vinyl slides out and spins while a track plays, beside the tracklist.
- Commerce Bundle: Build-a-box bundle with drawn coffee bags and a progress bar that unlocks bigger discounts.
- Pricing Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
- Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
- FAQ Chat: FAQ as a support chat: tap a question and a teammate types the answer back.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.