DreamsTour is a travel and tour booking template built with React 19 and TypeScript. It covers the complete booking journey - flights, hotels, tours, cruises, car and bus rentals, activities and visa services - along with agent and user dashboards. DreamsTour is a well-designed, fully responsive template with twelve home page variants, dark mode and RTL support, making it easy to launch a travel or tour agency website.
System Overview
The DreamsTour template requires a modern React development environment with Node.js and npm installed. The project is built with Vite and TypeScript, so no PHP, database or web server setup is needed.
Core Technologies
UI Library
React 19.2
CSS Framework
Bootstrap 5.3.8
Programming Language
TypeScript 5.9
System Requirements
Node.js
Version 20 LTS or higher
npm
Bundled with Node.js. Yarn may be used instead (optional)
Vite
Version 7. Installed with the project dependencies - handles the dev server, build and SCSS compilation
Text Editor
VS Code, Sublime Text, or any code editor
Development Tools
Terminal
To run the npm commands
Version Control
Git
Web Browser
Any modern browser
Important Note
Run npm install in the project
root before npm run dev, otherwise the dev
server will not start. If you are on an older Node.js
release, upgrade to Node 20 LTS or higher - Vite 7 does not
support earlier versions.
DreamsTour offers a powerful travel booking template and modern interface.
- Built with React 19
- Written in TypeScript
- Vite 7 build tooling
- Redux Toolkit state management
- React Router v7
- Bootstrap 5.3.8
- SCSS source styles included
- 12 Home Page Variants
- Flight, Hotel, Tour, Cruise, Car, Bus & Visa Modules
- Agent & User Dashboards
- Dark Mode Support
- RTL Support
- Font Awesome & Tabler icons
- Fully Responsive Layout
- Cross Browser Compatible
- Easy to Customize
- Clean & Well Commented Codes
- Compatible to all Mobile Devices
- Detailed Documentation
- Developer Friendly
- And Many More...
Project Overview
The React DreamsTour template follows a modular structure with clear separation of concerns, built on Vite.
react/ │ ├── node_modules/ │ └── All Dependencies │ ├── public/ │ ├── favicon.png │ ├── favicon.ico │ └── apple-touch-icon.png │ ├── src/ │ │ │ ├── assets/ │ │ ├── css/ │ │ ├── fonts/ │ │ ├── img/ │ │ └── style/ │ │ └── scss/ │ │ ├── components/ │ │ └── pages/ │ │ │ ├── core/ │ │ ├── common/ │ │ └── redux/ │ │ │ ├── feature-module/ │ │ ├── home-one/ ... home-twelve/ │ │ ├── flight/ │ │ ├── hotel/ │ │ ├── tour/ │ │ ├── car/ │ │ ├── bus/ │ │ ├── curise/ │ │ ├── visa/ │ │ ├── activity/ │ │ ├── guide/ │ │ ├── blog/ │ │ ├── pages/ │ │ ├── auth/ │ │ ├── agent-dashboard/ │ │ ├── userDashboard/ │ │ ├── router/ │ │ ├── feature.tsx │ │ └── authFeature.tsx │ │ │ ├── environment.tsx │ ├── index.scss │ └── main.tsx │ ├── index.html ├── vite.config.ts ├── eslint.config.js ├── tsconfig.json ├── tsconfig.app.json ├── tsconfig.node.json ├── package.json └── package-lock.json
After unzipping Template Files, you will find our product DreamsTour ->Reactjs(Source code)Mandatory are npm and node are needed to run the reactjs projectOnce unzipped the files,run the command:
npm install (or) npm iFor running a project , run the command:
npm run devIf you want to run the project and make the build in the production mode then run the following command in the root directory, otherwise the project will continue to run in the development mode.
npm run buildTo install any plugins in your application, you have to run the following command
npm install plugin_name --saveYou will see a Light mode and Dark mode button in the header. Choose any one of the option to change website theme.
Light Mode
Dark Mode
If you need to set a static Dark theme for your template, add the
dark-mode class to the
<html> tag:
<html class="dark-mode"></html>
in the index.html file
located at the project root (Vite keeps index.html
in the root folder, not inside public/).
-
Add Bootstarp RTL
Please remove the marked style in the src/main.tsx file and replace it with the style below
import "../node_modules/bootstrap/dist/css/bootstrap.rtl.min.css"; -
Add Class in Body tag in the index.html file at the project root
class="layout-mode-rtl"
To enable Right-to-Left (RTL) layout in a Bootstrap-powered page, you need to follow these steps to ensure proper support and display for RTL languages like Arabic, Hebrew, etc. Here’s a guide with clear steps and explanations.
Step 1: Applying RTL Direction via CSS
[dir="rtl"] {
background: #fff;
left: 0;
position: fixed;
right: 0;
top: 0;
height: 66px;
}
Explanation: The direction: rtl; property is applied to the "html" element via the CSS style block.This ensures that the entire content of the page flows from right to left.
The styles for the custom cursor are located in the cursor.scss file. You can find this file in the following directory:
Path: src/assets/style/scss/components/_cursor.scss
Cursor Html code:
<div class="xb-cursor tx-js-cursor">
<div class="xb-cursor-wrapper">
<div class="xb-cursor--follower xb-js-follower"> </div>
</div>
</div>
The Cursor component itself is located at src/core/common/cursor/cursor.tsx and is rendered from the feature.tsx file. You can find this file in the following directory:
Path: src/feature-module/feature.tsx
You can also disable the custom cursor by commenting out or removing the Cursor component from your code.
The loader can be fully customized to align with your brand, including color, animation style, size, and duration.
The styles for the loader are located in the _loader.scss file. You can find this file in the following directory:
Path: src/assets/style/scss/pages/_loader.scss
Loader Html code:
<div id="loader-wrapper" >
< div id="loader">
<span className="loader-line" > </span>
</div>
</div>
The script for the custom loader are located in the feature.tsx file. You can find this file in the following directory:
Path: src/feature-module/feature.tsx
You can also disable the custom Loader by commenting out or removing the Loader markup from your code.
DreamsTour is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.
Regular License
Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.
Extended License
For use by you or one client in a single end product for which end users may be charged.
What are the main differences between the Regular License and the Extended License?
If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.
| NAME | URL |
|---|---|
| Bootstrap | https://getbootstrap.com/docs/ |
| React | https://react.dev/ |
| React Router | https://reactrouter.com/ |
| Redux Toolkit | https://redux-toolkit.js.org/ |
| Vite | https://vite.dev/ |
| Ant Design | https://ant.design/ |
| PrimeReact | https://primereact.org/ |
| React Bootstrap | https://react-bootstrap.netlify.app/ |
| Swiper | https://swiperjs.com/ |
| React Slick | https://react-slick.neostack.com/ |
| ApexCharts | https://apexcharts.com/ |
| GSAP | https://gsap.com/ |
| AOS | https://michalsnik.github.io/aos/ |
| noUiSlider | https://refreshless.com/nouislider/ |
| React Select | https://react-select.com/ |
| React Datepicker | https://reactdatepicker.com/ |
| Yet Another React Lightbox | https://yet-another-react-lightbox.com/ |
| Moment JS | https://momentjs.com/ |
| Fontawesome | https://fontawesome.com/ |
| Tabler Icons | https://tabler.io/icons |
| Google Fonts | https://fonts.google.com/ |
Need Support?
If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com
Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.
Contact SupportImportant Note : We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.
Do you need a customized application for your business?
If you need a customized application for your business depends on your specific requirements and goals, Please contact us. Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.
Don't Miss Out on the Benefits of Customization!
Unlock the potential of your project. It's time to ensure your project isn't another cookie-cutter solution but truly unique and effective one.
Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!
We'll tailor the application to meet your specific needs and preferences.
We will upload your website to the server and ensure it is live.
Thank You
Thank you once again for downloading DreamsTour.
We hope you're enjoying your experience, and we kindly request that you take a
moment to share your valuable review and rating with us.