Song – React Next.js Music Template

Built on the latest React 19 and Next.js 16 (App Router) — future-proof and production ready.

A cohesive, premium design system with consistent typography, spacing, shadows and hover effects across every page.

Two complete themes in one product — a luxurious Dark version and an elegant Light version.

Genuinely reusable components — write once, reuse everywhere, customize in minutes.

SEO-first: unique metadata, Open Graph and Twitter cards on every page.

Accessibility-focused: keyboard-navigable menus, labelled inputs, skip links and ARIA-enhanced widgets.

Clean, well-organized, fully typed code that passes linting with a zero-warning production build.

What’s New in Version 2.0

Version 2.0 is a ground-up modernization of the entire template:

• ✅ Premium, pixel-perfect responsive layouts
• ✅ Improved typography (Space Grotesk display + Inter body)
• ✅ Better spacing and vertical rhythm
• ✅ Stronger visual hierarchy
• ✅ Reusable component architecture
• ✅ Premium reusable cards (tours, shop, albums, artists, blog, tickets)
• ✅ Framer Motion animations throughout
• ✅ Legacy AOS animations removed in favor of Framer Motion
• ✅ Spotify-inspired Audio Player
• ✅ Modern, feature-rich Video Player
• ✅ Shop pages
• ✅ Artist pages
• ✅ Album pages
• ✅ Tour pages
• ✅ Gallery pages
• ✅ Blog pages
• ✅ Contact pages
• ✅ Checkout pages
• ✅ Cart pages
• ✅ Brand-new premium Buy Tickets page
• ✅ Redesigned Coming Soon page
• ✅ Light & Dark versions
• ✅ Improved, token-driven SCSS architecture
• ✅ Better code organization and maintainability
• ✅ A noticeably better overall user experience

Technology Stack

• React 19
• Next.js 16 (App Router)
• TypeScript
• ️ Bootstrap 5
• SCSS (modular, token-driven)
• ️ Framer Motion
• next/font (Space Grotesk & Inter)
• ️ next/image optimization

Main Features

• React 19 & Next.js 16 App Router
• Written in TypeScript
• Bootstrap 5 grid + custom SCSS design system
• Framer Motion animations (fade, reveal, stagger, hover lift, image zoom)
• Dark & Light theme versions
• SEO optimized (per-page metadata, Open Graph, Twitter cards)
• Fully responsive & mobile-first
• Reusable, prop-driven components
• Fast performance with image optimization & code splitting
• Clean, maintainable, fully typed code
• Accessibility-friendly (ARIA, keyboard navigation, skip link)
• Graceful 404, error and loading states
• Easy customization via SCSS variables/tokens

Homepage Variations

• Home 1 — premium Dark theme
• Home 2 — elegant Light theme
• Rich section library: hero, stats, genres, featured player, trending songs, top artists, editor’s picks, latest albums, video spotlight, upcoming tour, testimonials, pricing/passes, FAQ, newsletter and Instagram gallery.

Inner Pages

• Audio Music & Audio Music v2
• Albums, Album Details (v1 & v2)
• Music Videos (v1 & v2)
• Artists, Artist Details (v1 & v2)
• Tours, Tour Details (v1 & v2)
• Buy Tickets (new premium booking page)
• Shop, Product Details, Cart, Checkout (v1 & v2)
• Gallery (v1 & v2)
• Blog, Blog Details (v1 & v2)
• Contact (v1 & v2)
• Coming Soon
• Custom 404 & Error pages

Music Features

• Audio music listing with a Spotify-inspired player
• Album & single showcase with track lists
• Album detail pages with related albums
• Music genres browsing
• Featured / trending song sections

Shop Features

• Premium product grid with quick-view
• Product detail pages with gallery, quantity selector & related products
• Cart page with quantity steppers and live totals
• Checkout page with billing form, order summary & payment options
• Persistent cart via local storage with live header cart count

Tour Features

• Tour listing with a reusable, premium event card
• Tour detail pages with countdown & featured spotlight
• Brand-new Buy Tickets page: event hero, live countdown, VIP / Gold / Silver / General ticket cards, live order summary, customer info form, demo payment methods, venue map, FAQ and related events

Blog Features

• Blog listing with premium article cards
• Blog detail pages with author, tags, share & comments
• Related posts & sidebar
• Light & Dark variants

Gallery Features

• Premium masonry-style gallery
• Lightbox preview (Fancybox)
• Light & Dark variants

Artist Features

• Artist listing with reusable artist cards
• Artist detail pages with bio, videos, albums & related artists
• Follow/like interactions
• Light & Dark variants

Audio & Video Player

• Spotify-inspired audio player with play/pause, next/previous, shuffle & progress
• Modern video player with custom controls and picture-in-picture support
• Reusable across music, album and artist pages

Dark & Light Versions

Every page ships in two fully designed themes — a premium Dark version and an elegant Light version. Theming is powered by CSS custom properties, so a single component renders perfectly in both themes without duplicated markup.

Animations

• Framer Motion throughout (fade-up, reveal, stagger, scale)
• Premium hover-lift and image-zoom effects
• Reduced-motion friendly — respects user preferences
• Legacy AOS removed for a cleaner, faster animation layer

Responsive Design

Song is pixel-perfect across desktop, laptop, tablet and mobile. Fluid clamp() typography and spacing, a mobile-first Bootstrap 5 grid and carefully tuned breakpoints ensure a flawless experience on every screen.

Reusable Components

• Cards: Tour, Ticket, Shop, Album, Artist, Blog, Gallery
• Commerce: Cart Item, Order Summary, Quantity Stepper, Payment Method
• Forms: Floating-label Form Field, Contact Form
• UI: Section Heading, Breadcrumb Banner, Countdown, Pagination, Filter Bar
• Motion: Reveal, Reveal Group, Reveal Item, Count-Up

Performance

• next/image optimization with modern WebP output
• Automatic code splitting via the App Router
• Optimized CSS & font loading with next/font
• Lean codebase — dead code and unused assets removed

SEO

• Unique title & description on every page
• Open Graph & Twitter card metadata
• Global title template & metadataBase
• Semantic HTML with proper landmarks & heading structure

Easy Customization

Change your entire brand look from a single SCSS variables file — colors, gradients, radius, shadows, spacing and typography are all centralized as design tokens. The modular SCSS structure and clearly named, reusable components make customization fast and safe.

Included Files

• Full Next.js source code (TypeScript)
• Modular SCSS source
• Reusable component library
• Environment example file (.env.example)

Support

When you purchase Song you gain access to lifetime support and free updates. We periodically improve the template and genuinely value your feedback for future updates and brand-new products. If you need help, please reach out through your ThemeForest item support.

Changelog

Version 2.0 — 16 July 2026

Completely redesigned UI/UX with a modern 2026 design language

New premium, pixel-perfect responsive layouts

Improved typography, spacing and visual hierarchy

New reusable component architecture & premium reusable cards

Framer Motion animations added (legacy AOS removed)

New Spotify-inspired Audio Player

New modern Video Player (with picture-in-picture)

Brand-new premium <strong>Buy Tickets</strong> page

Redesigned Coming Soon page

Premium Shop, Artist, Album, Tour, Gallery, Blog, Contact, Cart & Checkout pages

Light & Dark versions for every page

Upgraded to Next.js 16 (App Router) & React 19

Improved, token-driven SCSS architecture

 SEO improvements: per-page metadata, Open Graph & Twitter cards 

 Accessibility improvements (keyboard navigation, ARIA, skip-to-content) 

Better performance, cleaner code & better maintainability

Version 1.0 — 29 July 2025

Initial release of the Song music template

 Core pages: Home, Music, Artists, Tours, Gallery, Blog, Shop, Contact & Coming Soon 

Basic audio & video players

Responsive, mobile-friendly layout