LUXE Salon v1.0: Premium Hair Styling & Spa Template

Experience world-class digital presence. LUXE is a professional salon template built with HTML5 and the cutting-edge Tailwind CSS v4. Designed for Hair Stylists, Spas, and Beauty Professionals who demand a premium look.

Live Preview Buy on Gumroad Read Docs
New in v1.0: We now include a "Link-in-Bio" page (links.html) for free! Stop paying for Linktree.

Why Upgrade to LUXE?

Your clients judge you by your cover. LUXE gives you a "Book Now" ready website that includes Service Menus, Stylist Profiles, and a Gallery Lightbox out of the box. Plus, it uses the new Tailwind v4 engine for lightning-fast speeds.

Technical Specifications

We didn't just make it pretty; we made it powerful. LUXE runs on the latest tech stack.

Framework Tailwind CSS v4
Scripting Vanilla JS
License Personal / MIT
Extras Bio Page + 404

The Folder Structure

We keep it clean. Here is exactly what you get when you unzip the file. No bloat, just the files you need to run your business.

Luxe-Template
  • src
    • input.css (Edit Colors Here)
  • js
    • script.js
  • index.html (Main Page)
  • links.html (Bonus!)
  • 404.html
  • output.css
  • robots.txt

Comparison: LUXE vs Linktree/Wix

LUXE Template
  • One-time Payment ($29)
  • Custom Link-in-Bio Page Included
  • Full SEO Control (robots.txt)
Wix / Linktree
  • $15-$25 Monthly Subscription
  • Generic "Bio" Designs
  • Limited SEO on Free Plans

Installation Guide

Getting started is easy. You can either edit the HTML directly or use Node.js to compile the Tailwind styles.

1

Install Dependencies

Open your terminal in the project folder and run npm install to grab Tailwind CSS v4.

2

Clean Up HTML

Important: Remove the CDN script lines from index.html before going to production.

3

Start Development

Run npm run dev to watch for changes and see updates instantly.

# 1. Install Tailwind v4
npm install

# 2. Start the Watch Mode
npm run dev

# 3. Build for Production (Minified)
npm run build

Customizing Colors

Want to match your salon's brand? You don't need to hunt for hex codes in every file. Just open src/input.css and change the CSS variables:

Pro Tip: Look for the --color-brand-primary variable. Change #d4af37 (Gold) to your brand color, and the whole site updates instantly!

Common Questions

What is 'links.html'?
It's a bonus page designed for your Instagram/TikTok bio. It loads fast, matches your branding, and saves you from paying for Linktree Pro.
How do I change the Booking Link?
The booking modal is in index.html. Just change the form action or link the "Book Now" button to your Fresha/Calendly URL.
Is it SEO ready?
Yes. We include a robots.txt file and pre-configured Open Graph tags in the head for Facebook and Twitter sharing.

Download LUXE v1.0