Download Now

Techwind - React Js Multipurpose Landing & Admin Template

Introduction

Techwind is a fully responsive, clean and modern high-converting React Js Multipurpose App, Saas & Software Landing & Admin Dashboard Template. It is a beautifully handcrafted, pixel perfect multipurpose template based on the React v19.x and Tailwind css v4.x.. Techwind is a Powerful React Js Multipurpose Landing Page Template. It is an excellent template for startup, cloud hosting, business, corporate, minimal portfolio single product (Smartwatch) , Saas, Social media marketing, Digital marketing/agency, Email Templates, Marketing, Agency, Careers and Jobs, Helpcenter, and much more.

Separate: We have added separatly Javascript & Typescript both versions

Dark & RTL version Available: We have added a RTL version in both Dark and Light versions.

Please feel free to get back to me in case if you are having any question or feedback.

Setup React

Introduction

We are using npm which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18.

  • Git

    Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command Description
npm i This would install all the required dependencies in the node_modules folder.
npm run dev Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.
npm run build Generates a /dist directory with all the production files.

Folder & File Structure

	Techwind_Reactjs_v3.1.0
	│
	├──  Documentation   
	├──  Techwind_Reactjs (Javascript)
	│	│
	│	├──  Landing
	│	└──  Dashboard 
	│
	├──  Techwind_Reactjs (Typescript)
		│
		├──  Landing
		└──  Dashboard
	
	Landing
	│
	├──  src folder
	│   └──  assets
	│       └──  assets
	│       └──  components
	│           └──  Footer
	│               └──  All footer components
	│           └──  Navbar
	│               └──  All Navbar Components
	│           └──  accountTab.js
	│           └──  backToTop.js
	│           └──  blog.js
	│           └──  blog2.js
	│           └──  blogComment.js
	│           └──  blogUserDetail.js
	│           └──  blogUserProfile.js
	│           └──  cookiesModal.js
	│           └──  managemenstTeam.js
	│           └──  mobileApp.js
	│           └──  portfolioClassicFilter.js
	│           └──  portfolioCreativeFilter.js
	│           └──  portfolioDetailFilter.js
	│           └──  portfolioFilter.js
	│           └──  portfolioMasonryFilter.js
	│           └──  scrollToTop.js
	│           └──  Switch.js
	│           └──  userFeedBack.js
	│           └──  userFeedBack2.js
	│       │
	│       └──  pages (all pages here)
	│           └──  account
	│           │   └──  all account user pages (.js files)
	│           └──  auth
	│           │   └──  all auth pages (.js files)
	│           └──  blog
	│           │   └──  all blog pages (.js files)
	│           └──  company
	│           │   └──  all comapny inner pages (.js files)
	│           └──  contact
	│           │   └──  all contact pages (.js files)
	│           └──  courses
	│           │   └──  all courses pages (.js files)
	│           └──  ecommerce
	│           │   └──  all ecommerce (shop) pages (.js files)
	│           └──  email-template
	│           │   └──  all email-template pages (.js files)
	│           └──  forums
	│           │   └──  all forums pages (.js files)
	│           └──  helpcenter
	│           │   └──  all helpcenter pages (.js files)
	│           └──  index
	│           │   └──  all index pages (Landing pages) (.js files)
	│           └──  jobs
	│           │   └──  all jobs pages (.js files)
	│           └──  nft
	│           │   └──  all nft pages (.js files)
	│           └──  photography
	│           │   └──  all photography pages (.js files)
	│           └──  portfolio
	│           │   └──  all portfolio pages (.js files)
	│           └──  real-estate
	│           │   └──  all real-estate pages (.js files)
	│           └──  special
	│           │   └──  all special pages (.js files)
	│           └──  utility
	│           │   └──  all utility pages (.js files)
	│           └── changelog.js
	│           └── documentation.js
	│           └── foodRecipe.js
	│           └── videoportfolio.js
	│ 
	│       │   
	│       └──  App.js
	│       └──  index.js
	│
	└──  package.json
	└──  vite.config.js
	
	Dashboard
	│
	├──  src folder
	│   └──  assets
	│       └──  fonts
	│       └──  images
	│       └──  scss
	│       └──  components
	│           └──  navbar.js
	│           └──  blog.js
	│           └──  footer.js
	│           └── ...
	│           
	│       └──  pages
	│            └──  auth
	│            │   └──  login.js
	│            │   └── ...
	│            └──  blog
	│            │   └──  blog.js
	│            └──...
	│ 
	│   └──  App.js
	│   └──  index.js
	│   └──  App.css
	│
	└──  package.json
	└──  vite.config.js

How to change the color in Techwind?

First of all open tailwind.css (path: Landing/src/assets/css/tailwind.css) and replace or change color code --color-primary: #4f39f6;
Theme primary color --color-primary: #4f39f6;

How to change the fonts family in Techwind?

First of all open tailwind.css (path: Landing/src/assets/css/tailwind.css)
and add your font family
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
Import the @import link from your Google Fonts.

And then please open the tailwind.css and please create your google fonts name in the module.exports > theme > fontFamily

For example:
--font-nunito: "Nunito", "serif";
add your Google fonts like the above example.

Please refer this below link for font-family: https://tailwindcss.com/docs/font-family#customizing-your-theme

And then you can use it directly as a class like font-nunito

Plugins

Here is the list of plugin which used in Techwind React:

Plugin Version
react 19.1.12 Updated
tailwindcss 4.1.12 Updated
yet-another-react-lightbox 3.25.0 Updated
react-countup 6.5.3
react-responsive-masonry 2.7.1
react-dom 19.1.1 Updated
react-router-dom 7.8.2 Updated
react-scroll 1.9.3
tiny-slider-react 0.5.7
react-scripts 5.0.1
react-select 5.10.2 Updated
react-feather 2.0.10
react-icon 5.5.0
react-type-animation 3.2.0
swiper 11.2.10 Updated
@ckeditor/ckeditor5-build-classic 44.3.0
@ckeditor/ckeditor5-react 11.0.0 Updated
@fullcalendar/daygrid 6.1.19 Updated
@fullcalendar/react 6.1.19 Updated
react-apexcharts 1.7.0
@react-jvectormap/world 1.1.2
simplebar-react 3.3.2 Updated
Vite 7.1.4 Updated
Typescript 5.9.2 Updated

Supports

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Stay awesome

- Shreethemes

Changelog

Version v3.1.0 - 3rd September 2025

  • Landing:
  • Update: Updated the React Js Version v19.1.12
  • Update: Updated the Tailwind CSS Version v4.1.12
  • Update: Updated the yet-another-react-lightbox v3.25.0
  • Update: Updated the react-dom v19.1.1
  • Update: Updated the react-router-dom v7.8.2
  • Update: Updated the react-select v5.10.2
  • Update: Updated the swiper js v11.2.10
  • Update: Updated the Vite js v7.1.4
  • Update: Updated the Navbar Font size issues
  • Update: Updated color indigo-600 to primary
    Note: We have changed the color indigo-600 to the primary color. You can change your primary theme color by using the primary color code.
  • Admin Dashboard:
  • Update: Updated the React Js Version v19.1.12
  • Update: Updated the Tailwind CSS Version v4.1.12
  • Update: Updated the yet-another-react-lightbox v3.25.0
  • Update: Updated the react-dom v19.1.1
  • Update: Updated the react-router-dom v7.8.2
  • Update: Updated the react-select v5.10.2
  • Update: Updated the @ckeditor/ckeditor5-react v11.0.0
  • Update: Updated the @fullcalendar/daygrid v6.1.19
  • Update: Updated the @fullcalendar/react v6.1.19
  • Update: Updated the simplebar-react v3.3.2
  • Update: Updated the Typescript v5.9.2
  • Update: Updated color indigo-600 to primary
    Note: We have changed the color indigo-600 to the primary color. You can change your primary theme color by using the primary color code.

Version v3.0.0 - 7th March 2025

  • Landing:
  • Update: Updated the Tailwind Version v4.0.9
  • Update: Updated the react-icons v5.5.0
  • Update: Updated the react-scroll v1.9.3
  • Remove: Removed the @tailwindcss/forms
  • Add: Added the yet-another-react-lightbox insted of react-18-image-lightbox for lightbox
  • Remove: Removed the react-18-image-lightbox
  • Remove: Removed the react-modal-video
  • Remove: Removed the react-parallax
  • Admin Dashboard:
  • Update: Updated the Tailwind Version v4.0.9
  • Update: Updated the react-icons v5.5.0
  • Update: Updated the @ckeditor/ckeditor5-build-classic v44.3.0
  • Update: Updated the @ckeditor/ckeditor5-react v9.5.0
  • Remove: Removed the @tailwindcss/forms
  • Add: Added the yet-another-react-lightbox insted of react-18-image-lightbox for lightbox
  • Remove: Removed the react-18-image-lightbox

Version v2.4.0 - 7th February 2025

  • Landing:
  • Update: Updated the Tailwind Version v3.4.17
  • Update: Updated the React v19.0.0
  • Update: Updated the @tailwindcss/forms v0.5.10
  • Update: Updated the react-icons v5.4.0
  • Update: Updated the react-responsive-masonry v2.7.1
  • Update: Updated the swiper v11.2.2
  • Add : Added animation in SAAS (index-saas) demo
  • Remove: Removed & Replaced pure-react-carousel to swiper slider
  • Add : Added new Solar / Green Energy (index-solar) demo
  • Add: Added and Updated with Vite with React js in Javascript
  • Add: Added New Typescript Version
  • Admin Dashboard:
  • Update: Updated the Tailwind Version v3.4.17
  • Update: Updated the React v19.0.0
  • Update: Updated the @tailwindcss/forms v0.5.10
  • Update: Updated the react-icons v5.4.0
  • Update: Updated the react-apexcharts v1.7.0
  • Update: Updated the simplebar-react v3.3.0
  • Removed: Removed & Replaced react-jvectormap to @react-jvectormap/world
  • Removed: Removed react-tradingview-widget
  • Add : Added new eCommerce Dashboard (index-ecommerce) Demo
  • Add: Added and Updated with Vite with React js in Javascript
  • Add: Added New Typescript Version

Version v2.3 - 5th September 2024

  • Landing:
  • Update: Updated the Tailwind Version 3.4.10
  • Update: Updated the React 18.3.1
  • Update: Updated the react-countup 6.5.3
  • Update: Updated the react-icons 5.3.0
  • Update: Updated the react-modal-video 2.0.2
  • Update: Updated the react-responsive-masonry 2.3.0
  • Update: Updated the react-router-dom 6.26.1
  • Update: Updated the react-type-animation 3.2.0
  • Update: Updated the swiper 11.1.12
  • Add : Added new Web Programming (index-web-programming) demo
  • Add : Added new Cleaner (index-cleaner) demo
  • Add : Added new Service Detail (page-service-detail) page
  • Update & Fix : Updated and Fixed Icons files
  • Admin Dashboard:
  • Update: Updated the Tailwind Version 3.4.10
  • Update: Updated the React 18.3.1
  • Update: Updated the react-countup 6.5.3
  • Update: Updated the react-icons 5.3.0
  • Update: Updated the @ckeditor/ckeditor5-build-classic 43.0.0
  • Update: Updated the @ckeditor/ckeditor5-react 9.0.0
  • Update: Updated the @fullcalendar/daygrid 6.1.15
  • Update: Updated the @fullcalendar/react 6.1.15
  • Update: Updated the simplebar-react 3.2.6
  • Add : Added new eCommerce Dashboard (index-ecommerce) Demo
  • Update & Fix : Updated and Fixed Icons files

Version v2.2 - 11th March 2024

  • Landing:
  • Add : Added new Life Coach (index-life-coach) demo
  • Add : Added new Landing Six (index-landing-six) demo
  • Update: Updated height & width classes to size-* as per latest tailwindcss
  • Update: Updated the Tailwind Version 3.4.1
  • Update: Updated the React Icons Version 5.0.1
  • Update: Updated the React router dom Version 6.22.3
  • Update: Updated the React responsive masonry Version 2.2.0
  • Update: Updated the tailwind.css file for if you direct write your css classes in inline css
  • Admin Dashboard:
  • Update: Updated the Tailwind Version 3.4.1
  • Update: Updated the React Icons Version 5.0.1
  • Update: Updated the React router dom Version 6.22.3
  • Update: Updated the React responsive masonry Version 2.2.0
  • Update: Updated the ckeditor Version 41.2.0
  • Update: Updated the Full calendar Version 6.1.11
  • Update: Updated the Full calendar react Version 6.1.11
  • Update: Updated height & width classes to size-* as per latest tailwindcss
  • Update: Updated the tailwind.css file for if you direct write your css classes in inline css

Version v2.1.0 - 9th December 2023

  • Landing:
  • Update: Updated Tailwind CSS v3.3.6
  • Add : Added new Christmas (index-christmas) demo
  • Add : Added new Classic Business (index-classic-business) demo
  • Remove: Removed Listner with cleanup function
  • Update: Updated data file for the repeted section and store in common data file
  • Admin Dashboard:
  • Update: Updated Tailwind CSS v3.3.6
  • Add : Added new Cryptocurrency (index-crypto) demo
  • Remove: Removed Listner with cleanup function
  • Update: Updated data file for the repeted section and store in common data file

Version v2.0 - 19th September 2023

  • Landing:
  • Remove: Removed all UNICONS icons and replaced or updated REACT Icons
  • Add : Added new Ai (index-ai) demo
  • Add : Added new Podcast (index-podcast) demo
  • Add : Added new Travels (index-travel) demo
  • Add : Added new Components (components) page
  • Update: Updated the Dynamic Blog detail page as per the ID
  • Update: Updated the Dynamic NFT detail page as per the ID
  • Update: Updated the Dynamic Job detail page as per the ID
  • Update: Updated the Dynamic Ecommerce Item detail page as per the ID
  • Update: Updated the Dynamic Real Estate detail page as per the ID
  • Update: Updated the Dynamic Course detail page as per the ID
  • Add : Added new Components (components.html) page
  • Admin Dashboard:
  • Add : Added Admin Panel

Version v1.0 - 1st August 2023

  • Initial Released