System Requirements

Before installing, ensure you have the following:

• Node.js 18+ (Download from Node.js Official Website )
• npm or yarn (Installed with Node.js)
• Code Editor (Recommended: VS Code)

node -v

Download & Extract the Template

1. Purchase & Download the ZIP file from ThemeForest.
2. Go to your ThemeForest Downloads section.
3. Click Download and choose "All files & documentation".
4. Extract the downloaded ZIP file to your desired location.

 📂 wanderai/
    ├── 📂 documentation/
    ├── 📂 template-files/
    ├── README.md
    ├── license.txt
                                        

Install Dependencies

Navigate to the template-files folder and install dependencies:

cd template-files
npm install

or

yarn install
                                        

Run the Development Server

npm run dev

or

yarn dev
                                        

Build for Production

npm run build
                                        

How to change the colors.

All colors in this template are defined using CSS variables inside the _variables.scss file. The colors are stored in RGB format so can easily adjust opacity using rgba().

To change the theme color, simply update the RGB values. For example, to set the theme color to blue, change:

--theme-color: 0, 122, 255;  /* New theme color */
                                                

The dark mode colors are defined under the .dark class:

.dark {
    --theme-color: 69, 165, 135;  /* Theme color remains same */
    --white: 23, 34, 40;          /* Adjusted for dark mode */
    --black: 0, 0, 0;
}
                                                

Since the colors are stored in RGB format, you must use rgba() to apply opacity.

color: rgba(var(--theme-color), 1); /* Full opacity */
color: rgba(var(--theme-color), 0.8); /* 80% opacity */
                                                

Add or Remove Pages

All the pages are located in the src/app/ directory. Each folder inside app/ represents a route (URL) in your project.

To Add a Page:

1. Go to:
   
   src/app/
2. Create a new folder with the page name:
   Example:
   testimonial
3. Inside that folder, create a page.tsx file:
   

   
   // src/app/testimonial/page.tsx
   'use client'
   
   const Testimonial = () => {
       return (
           <h1>Testimonial Page</h1>
       )
   }
   
   export default Testimonial                                                    
                                                   

4. Now visit:
   
   http://localhost:3000/testimonial

To Remove a Page:

1. Go to
   src/app/
2. Delete the folder for that page (e.g.,
   testimonial/
   )
3. That route will no longer be available in the browser.

Add or Remove Components

All components are organized inside the src/components/ directory. Each component usually has its own folder with a .tsx file and a .scss file.

To Add a Component:

1. Go to:
   
   src/components/
2. Create a new folder with the page name:
   Example:
   Testimonial
3. Inside it, create the component files:
   

   
   // src/components/Testimonial/Testimonial.tsx
   'use client'
   
   import './Testimonial.scss';
   
   export default function Testimonial() {
       return <div className="testimonial">Testimonial Section</div>;
   }
                                                       

   
   /* src/components/Testimonial/Testimonial.scss */
   .testimonial {
     padding: 2rem;
     background-color: rgba(var(--theme-color), 0.1);
   }
                                                       

4. Import and use it in a page or another component:

   
   import Testimonial from '@/components/Testimonial/testimonial';
   
   <Testimonial />
                                                       

To Remove a Page:

1. Locate the component folder inside
   src/components/
2. Delete the folder(e.g.,
   Testimonial/
   )
3. Remove any references/imports from pages or other components

Changing Global Styles

Global styles help you maintain consistency across your entire project—like resetting default browser styles, defining typography, setting up layout rules, and importing fonts. All global styles are managed in one place to make them easy to customize.

How to Update Global Styles

1. Open:
   
   src/styles/global.scss
2. Edit or Add Rules:

   Here are a few examples of what you can customize:

   Body & Typography

   
   body {
       position: relative;
       background-color: rgba(var(--white), 1);
       font-weight: normal;
       -ms-overflow-style: none;
       scrollbar-width: none;
       margin: 0;
       padding: 0;
       color: rgba(var(--title-color), 1);
       font-size: responsive-value(16px, 14px);
   }
                                                       

   responsive-value()

   This template uses a responsive-value() SCSS function to create fluid, scalable styles like font sizes or spacing between 320px and 1920px viewport widths.

   Example: font-size: responsive-value(16px, 14px); sets font-size to 16px on large screens and 14px on small screens, scaling smoothly in between.

   Section space

   
   .section-t-space,
   section {
       padding-top: responsive-value(50px, 35px);
   }
   
   .section-b-space {
       padding-bottom: responsive-value(50px, 35px);
   }
   
   .section-title {
       color: rgba(var(--title-color), 1);
       font-weight: 600;
       margin-bottom: 18px;
       margin-top: -4px;
       font-size: responsive-value(22px, 19px);
   
       a {
       margin-left: auto;
       font-size: 18px;
       }
   }
                                                       

   Container Style

   
   .container {
       padding-left: 15px;
       padding-right: 15px;
       
       @media (min-width: 1400px) {
           max-width: 760px;
       }
       
       @media (min-width: 1200px) {
           max-width: 740px;
       }
       
       @media (min-width: 992px) {
           max-width: 720px;
       }
       
       @media (min-width: 768px) {
           max-width: 580px;
       }
   }
       
   .container-fluid {
       padding-left: 15px;
       padding-right: 15px;
   }
                                                       

Modifying Components

This template includes a set of reusable, customizable components to speed up development and maintain consistency. All components are located in the src/components/ folder, and each component has its own folder with a .tsx and .scss file for structure and styling. Below are examples of how to modify two commonly used components: AppButton and InputField.

AppButton Component

The AppButton is a reusable button component with support for icons, images, and multiple predefined styles.

Path:

src/components/AppButton/AppButton.tsx  
src/components/AppButton/AppButton.scss                                            
                                            

Style Variants (via className)

Usage Example

<AppButton
    text="Continue"
    className="w-100 btn-theme"
    icon={<RiArrowRightLine />}
    onClick={handleClick}
    iconPosition="right"
/>
                                            

InputField Component

The InputField component is a flexible, reusable form input element with support for multiple types including text, email, password, number, tel, select, textarea, date, and expiry (MM/YY format).

Supported Types

• text, email, password, number, tel
• select (with options)
• textarea
• date (with toggleable picker)
• expiry (auto-formats to MM/YY)

Usage Example

<InputField
    id="email"
    type="email"
    label="Email Address"
    placeholder="Enter your email"
    value={formData.email}
    onChange={handleChange}
/>

<InputField
    id="country"
    type="select"
    label="Select Country"
    options={[
    { label: "India", value: "in" },
    { label: "USA", value: "us" },
    ]}
    value={selectedCountry}
    onChange={handleSelect}
/>
                                            

Note: The above are just examples. The template also includes other reusable components like ActionPanel, Sidebar, Cards, Wrapper, TitleBar, and more — all customizable and located in the components/Common/ folder.

This template is designed as a front-end-only solution and does not include live API integration by default. However, all dynamic data used in the template is organized in the src/data/ folder to simulate API-like structure.

You’ll find multiple .ts and .tsx files such as:

• ActionPanelLinks.tsx – Navigation links used in the action panel
• Blogs.ts – Blog listing data
• Category.ts – Category options for filters or listings
• FooterLinks.tsx – Footer navigation or informational links
• Packages.ts – Travel packages
• and others...

This template is built with Next.js 14 and supports both Static Site Generation (SSG) and Server-Side Rendering (SSR). After customizing the template, you can deploy it on any modern platform like Vercel, Netlify, DigitalOcean, or your own hosting.

Build Commands

npm run build
                                            

To preview the production build locally:

npm run start
                                            

How to fix SCSS/CSS not loading?

Facing npm install or dependency errors?

Can’t see changes after editing components?

How to switch between light and dark mode?

Why are icons not displaying properly?

Why aren’t images or videos loading?

Credits

• React Bootstrap
• Google Fonts
• RemixIcons
• React Datepicker
• React Flag Select
• React Responsive Masonry
• Swiper JS
• Freepik

Support

If you face any issues with the template or need help with customization:

• Email Support: support@focalthemes.com
• Bug Reports: Include the error message, browser version, and steps to reproduce.
• Documentation: Please refer to the full documentation for installation and usage instructions.

We aim to respond to all support queries within 12–24 hours on business days.