Song – Music Streaming, DJ & Artist React Next.js Template
Introduction
Song is a modern, premium, and highly functional music website template built with React 19, Next.js 16 and TypeScript. Crafted specifically for musicians, bands, singers, DJs, music producers, record labels and streaming platforms, Song helps you showcase your music, tours, albums and personal brand with a bold, contemporary aesthetic.
Whether you are an independent artist building your first portfolio or a studio launching a full-scale music platform, Song gives you a fast, SEO-optimized, accessible and developer-friendly foundation. The all-new Version 2.0 is a complete visual and architectural overhaul — a modern 2026 design language, a premium reusable component system, buttery Framer Motion animations, and a brand-new premium Buy Tickets booking experience.
Why Choose Song
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
- Home 3 — Music Streaming
- Home 4 — DJ Party
- 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 3.0 — 18 August 2026
Added new Music Streaming homepage Added new DJ Party homepage Added Streaming & DJ Party options to FloatingSettings Added Streaming & DJ Party previews Added homepage switching/navigation support Added dedicated layouts and sections for both new homepage variations Improved homepage version selection experience
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 Buy Tickets 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 & Basic audio & video players Responsive, mobile-friendly layout Coming Soon