Home
NextSaaS

Customization Guide

This comprehensive guide will walk you through customizing your NextSaaS template to meet your specific requirements. Whether you're modifying production files or development components, this documentation provides step-by-step instructions for all customization scenarios.

Production File#

Customizing NextSaaS production files is straightforward and involves modifying HTML, CSS, and JavaScript code within the production folder. Since we use Vite for production builds, you'll find the compiled production files in the dist folder.

To customize production files:

  1. Open the dist folder using your preferred code editor
  2. Locate the specific files you want to modify
  3. Make your desired changes to the HTML, CSS, or JavaScript code
  4. Save your changes

Note: Production file modifications will be overwritten when you rebuild the project. For persistent changes, modify the source files in development mode.

Development File#

Component Structure

All page content is managed through a modular component system. Components are organized in the src/components folder with the following structure:

  • src/components/pages - Contains page-specific components organized by page name
  • src/components/shared - Contains reusable components used throughout the project

Example: To customize the hero section of Homepage 1, navigate to src/components/pages/homepage-01/hero.htm. You can also access specific component files through their respective page imports.

CSS Architecture

NextSaaS is built using Tailwind CSS v4 with custom utility classes. All CSS files are located in the src/styles folder and imported into src/styles/main.css.

CSS File Organization

  • header.css - Header and navigation utility classes
  • badge.css - Badge utilities (badge-green, badge-blur, badge-primary, etc.)
  • button.css - Button styling and variants
  • base.css - Typography and base styles
  • custom-swiper.css - Customized Swiper component styles
  • common.css - Common utility styles
  • variable.css - CSS custom properties and Inter Tight font configuration

Font Configuration: The project uses Inter Tight font, which can be customized in the variable.css file.

Asset Management

Images

All images are stored in the public/images folder. To replace any image:

  1. Navigate to public/images
  2. Replace the existing image with your new file
  3. Ensure the new file has the same name and format, or update all references

Icons

Custom icons are stored in the public/icons folder. Follow the same process as images to replace icons.

Modifying Styles

  • Tailwind CSS: Modify src/styles/ files for custom styles
  • Component Styles: Edit individual component CSS files
  • Variables: Update src/styles/variables.css for theme customization

JavaScript Customization

All custom JavaScript code is organized in the src/js/main.js file. The code is modularized across different files for better maintainability. To customize any JavaScript functionality:

  1. Navigate to the specific JavaScript file
  2. Locate the function you want to modify
  3. Make your changes while maintaining the existing function signatures

Adding Animations

  • Create new animation files in src/js/animation/
  • Import and initialize in src/main.js

Creating New Pages#

Follow this systematic approach to create new pages in your NextSaaS project:

Step 1: Create the HTML File

Create a new HTML file in the root folder with your desired page name. The filename will serve as the route name.

Example: Creating finance.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <Component src="src/components/shared/head-links.htm" />
    <title>Finance Solutions - NextSaaS</title>
  </head>
  <body class="bg-background-3 dark:bg-background-7 overflow-x-hidden">
    <Component
      src="src/components/shared/header-one.htm"
      class="bg-accent/60 border-stroke-2 dark:border-stroke-6 dark:bg-background-9 border backdrop-blur-[25px]"
      btn-class="btn-secondary hover:btn-primary dark:btn-accent" />
    <main>
      <!-- Page content will be added here -->
    </main>
    <Component src="src/components/shared/footer-one.htm" />
  </body>
</html>

Step 2: Create Component Directory

  1. Create a new folder in src/components/pages named after your page (e.g., finance)
  2. This folder will contain all components specific to your new page

Step 3: Create Page Components

Create individual component files for each section of your page.

Example: Creating hero.htm for the hero section:

<section class="py-24">
  <div>
    <h1>Finance Page Hero</h1>
  </div>
</section>

Step 4: Import Components

Import your component into the main HTML file using Vite's component system:

<main>
  <Component src="src/components/pages/finance/hero.htm" />
  <!-- Add additional components as needed -->
</main>

Step 5: Add Additional Sections

Continue creating components for additional sections (features, testimonials, pricing, etc.) and import them into your main page file.

Step 6: Render your page

Open this http://localhost:5173 in your favourite browser. Enter your recently created page name after the port. Like http://localhost:5173/finance.html.

Best Practices#

Component Organization

  • Keep components modular and focused on single responsibilities
  • Use descriptive names for component files
  • Maintain consistent file structure across pages

CSS Customization

  • Leverage Tailwind's utility classes whenever possible
  • Use CSS custom properties for theme values
  • Keep custom CSS minimal and well-documented

Asset Management

  • Optimize images for web performance
  • Use consistent naming conventions
  • Maintain organized folder structures

Support#

For additional assistance with customization:

  • Email: hello@pixels71.com

Our team is available to help with any customization questions or complex implementation requirements.