Download Now

Techwind - React Next.js Multipurpose Landing & Admin Dashboard Template

Introduction

Techwind is a fully responsive, clean and modern high-converting NextJs Multipurpose Landing & Admin Dashboard Template. It is a beautifully handcrafted, pixel perfect Next js Landing & Admin template based on the Next 16.X, React 19.X and Tailwind css v4.x.. Techwind is a Powerful Next 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.

Admin: We have added a Admin Dashboard Template.

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

Setup Next

Introduction

We are using npm which allows having complete automation for build flow. In case if you dont know npm then its 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 20.

  • 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 / npm i --force 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. The development server is accessible at http://localhost:3000.
npm run build Generates a /build or dist directory with all the production files.

Folder & File Structure

Techwind_NextJs_v3.2.0
│
├──  Documentation   
├──  Techwind_NextJs (Javascript)
│	│
│	├──  Landing
│	└──  Dashboard 
│
├──  Techwind_NextJs (Typescript)
	│
	├──  Landing
	└──  Dashboard

Landing
│
├── public
|     └──  images
├── src
│   └──  assets
│   └──  app
│        └──  assets
|	       └──  css
|	       └──  fonts
|
│   └──  components
|	 └──  All components
|
│   └──  layouts.js (change your font family here)
│   └──  page.js (1st index page)
|   └──  auth-login
|	  └──  page.js 
|   └──  auth-signup
|	  └──  page.js 
|   └──  auth-reset-password
|	  └──  page.js
|   └──  etc (for other pages like blog, Employer listing, Candidate Listing, job listing, special pages, helpcenter pages, etc.)
│
└──  package.json Updated
└──  postcss.config.mjs
└──  jsconfig.js
└──  next.config.mjs
	
Dashboard
│
├── public
|     └──  images
├── src
│   └──  app
│        └──  assets
|	       └──  css
|	       └──  fonts
|
│   └──  components
|	 └──  All components
|
│   └──  layouts.js (change your font family here)
│   └──  page.js (1st index page)
|   └──  auth-login
|	  └──  page.js 
|   └──  auth-signup
|	  └──  page.js 
|   └──  auth-reset-password
|	  └──  page.js
|   └──  etc (for other pages like blog, chat, email, calendar, special pages, helpcenter pages, etc.)
│
└──  package.json Updated
└──  postcss.config.mjs
└──  jsconfig.js
└──  next.config.mjs

How to change the color in Techwind?

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

How can you change the font-family?

First of all open tailwind.css (path: HTML/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 Next:

Plugin Version
next 16.1.1 Updated
react 19.2.3 Updated
tailwindcss 4.1.18 Updated
@tailwindcss/postcss 4.1.18 Updated
react-countup 6.5.3
react-responsive-masonry 2.7.1 Updated
react-dom 19.2.3 Updated
yet-another-react-lightbox 3.28.0 Updated
react-type-animation 3.2.0
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
swiper 12.0.3 Updated
jsvectormap 1.7.0
@fullcalendar/daygrid 6.1.20 Updated
@fullcalendar/react 6.1.20 Updated
simplebar-react 3.3.2
@ckeditor/ckeditor5-build-classic 44.3.0
@ckeditor/ckeditor5-react v11.0.1 Updated
react-apexcharts 1.9.0 Updated
typescript 5.9.3 Updated

Components

Please check all components are here like services, features, about us, contact us, team, process, etc.

Path like: Techwind_Nextjs/src/app/components

page.js

page.js is assigned for index (default index page)

Path like: Techwind_Nextjs/src/page.js

How to change your template color?

It's easy to change your color if your color is emerald-600 to another (green-600, red-400, orange-700, etc. as your template primary color) please check and read the below link to the customizing colors docs, https://tailwindcss.com/docs/customizing-colors

How to change your Light theme to Dark theme?

Please open the layout.js (path: src/app/layout.js) and add or replace the class light to dark

For Light mode: <html lang="en" className="light scroll-smooth" dir="ltr">

For Dark mode: <html lang="en" className="dark scroll-smooth" dir="ltr">

How to change your LTR theme to RTL theme?

Please open the layout.js (path: src/app/layout.js) and add or replace the dir ltr to rtl

For LTR mode: <html lang="en" className="light scroll-smooth" dir="ltr">

For RTL mode: <html lang="en" className="light scroll-smooth" dir="rtl">

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.2.0 - 8th January 2026

  • Landing:
  • Update: Updated the Next Js Version v16.1.1
  • Update: Updated the React Js Version v19.2.3
  • Update: Updated the Tailwind CSS Version v4.1.18
  • Update: Updated the @tailwindcss/postcss v4.1.18
  • Update: Updated the yet-another-react-lightbox v3.28.0
  • Update: Updated the react-dom v19.2.3
  • Update: Updated the react-responsive-masonry v2.7.1
  • Update: Updated the react-select v5.10.2
  • Update: Updated the swiper js v12.0.3
  • Update: Updated the Typescript v5.9.3
  • Update: Updated & Fixed the Utility classes (Margin, Padding, Width, Height, Size, Start, Top, Bottom, End, Rotate, Z-index, and etc.)
  • Admin Dashboard:
  • Update: Updated the Next Js Version v16.1.1
  • Update: Updated the React Js Version v19.2.3
  • Update: Updated the Tailwind CSS Version v4.1.18
  • Update: Updated the @tailwindcss/postcss v4.1.18
  • Update: Updated the yet-another-react-lightbox v3.28.0
  • Update: Updated the react-dom v19.2.3
  • Update: Updated the react-responsive-masonry v2.7.1
  • Update: Updated the react-select v5.10.2
  • Update: Updated the @ckeditor/ckeditor5-react v11.0.1
  • Update: Updated the @fullcalendar/daygrid v6.1.20
  • Update: Updated the @fullcalendar/react v6.1.20
  • Update: Updated the react-apexcharts v1.9.0
  • Update: Updated the Typescript v5.9.3
  • Update: Updated & Fixed the Utility classes (Margin, Padding, Width, Height, Size, Start, Top, Bottom, End, Rotate, Z-index, and etc.)

Version v3.1.0 - 3rd September 2025

  • Landing:
  • Update: Updated the Next Js Version v15.3.0
  • Update: Updated the React Js Version v19.1.1
  • 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-select v5.10.2
  • Update: Updated the swiper js v11.2.10
  • 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 Next Js Version v15.3.0
  • Update: Updated the React Js Version v19.1.1
  • 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-select v5.10.2
  • Update: Updated the jsvectormap v1.7.0
  • 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 react-apexcharts v1.7.0
  • 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 - 12th March 2025

  • Landing:
  • Update: Updated the Tailwind v4.0.10
  • Update: Updated the swiper v11.2.5
  • Update: Updated the react-scroll v1.9.3
  • Update: Updated the react-select v5.10.1
  • Update: Updated the react-icons v5.5.0
  • Remove: Removed the flowbite
  • Remove: Removed the flowbite-react
  • Remove: Removed the lightbox.js-react
  • Remove: Removed the @tailwindcss/forms
  • Remove: Removed the react-18-image-lightbox
  • Remove: Removed the react-18-image-lightbox
  • Update: Updated the form-input css
  • Update: Updated the checkbox & radio button as per tailwindcss
  • Update: Updated the shadow to shadow-sm class as per tailwind css
  • Update: Updated the border class as per tailwind css
  • Admin Dashboard:
  • Update: Updated the Tailwind v4.0.10
  • Update: Updated the swiper v11.2.5
  • Update: Updated the react-scroll v1.9.3
  • Update: Updated the react-select v5.10.1
  • Update: Updated the react-icons v5.5.0
  • Update: Updated the react-dom v19.0.0
  • Update: Updated the tiny-slider-react v0.5.7
  • Remove: Removed the flowbite
  • Remove: Removed the flowbite-react
  • Remove: Removed the lightbox.js-react
  • Remove: Removed the @react-jvectormap/core
  • Remove: Removed the @react-jvectormap/world
  • Add: Added the jsvectormap
  • Remove: Removed the @tailwindcss/forms
  • Remove: Removed the react-18-image-lightbox
  • Update: Updated the @ckeditor/ckeditor5-build-classic v44.3.0
  • Update: Updated the @ckeditor/ckeditor5-react v9.5.0
  • Update: Updated the form-input css
  • Update: Updated the checkbox & radio button as per tailwindcss
  • Update: Updated the shadow to shadow-sm class as per tailwind css
  • Update: Updated the border class as per tailwind css

Version v2.4.0 - 13th February 2025

  • Landing:
  • Update: Updated the next v15.1.7
  • Update: Updated the react v19.0.0
  • Update: Updated the Tailwind v3.4.17
  • Remove: Removed the pure-react-carousel
  • Remove: Removed the react-18-image-lightbox
  • Update: Updated the react-countup v6.5.3
  • Update: Updated the react-dom v19.0.0
  • Update: Updated the react-feather v2.0.10
  • Update: Updated the react-icons v5.4.0
  • Remove: Removed the react-modal-video
  • Update: Updated the react-responsive-masonry v2.7.1
  • Update: Updated the react-scroll v1.9.2
  • Update: Updated the react-select v5.10.0
  • Update: Updated the react-type-animation v3.2.0
  • Update: Updated the sass v1.84.0
  • Update: Updated the swiper v11.2.3
  • Update: Updated the tiny-slider-react v0.5.7
  • Add: Added the flowbite v3.1.2
  • Add: Added the flowbite-react v0.10.2
  • Add: Added the lightbox.js-react v1.4.6
  • Add: Added Animation in index-saas
  • Add: Added New index page (Solar & Renewable Energy)
  • Admin Dashboard:
  • Update: Updated the @ckeditor/ckeditor5-build-classic v44.1.0
  • Update: Updated the @tailwindcss/forms v0.5.10
  • Update: Updated the next v15.1.6
  • Update: Updated the react-apexcharts v1.7.0
  • Update: Updated the react-icons v5.4.0
  • Update: Updated the sass v1.84.0
  • Update: Updated the swiper v11.2.2
  • Update: Updated the tailwindcss v3.4.17

Version v2.3.1 - 3nd December 2024

  • Landing:
  • Update: Updated the Tailwind v3.4.15
  • Update: Updated the Next Js v15.0.3
  • Update: Updated the React js v19.0.0
  • Update: Updated the react-responsive-masonry v2.4.1
  • Update: Updated the react-dom v19.0.0
  • Update: Updated the swiper v11.1.15
  • Update: Updated the React Scroll v1.9.0
  • Admin Dashboard:
  • Update: Updated the Tailwind v3.4.15
  • Update: Updated the Next Js v15.0.3
  • Update: Updated the React js v19.0.0
  • Update: Updated the react-dom v19.0.0
  • Update: Updated the @ckeditor/ckeditor5-build-classic v44.0.0
  • Update: Updated the @ckeditor/ckeditor5-react v9.4.0
  • Remove: Removed the react-jvectormap
  • Add: Added the @react-jvectormap/core v1.0.4
  • Add: Added the @react-jvectormap/world v1.1.2

Version v2.3.0 - 6th September 2024

  • Landing:
  • 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: Updated the Tailwind v3.4.10
  • Update: Updated the Next Js v14.2.7
  • Update: Updated the React js v18.3.1
  • Update: Updated the react-countup v6.5.3
  • Update: Updated the react-responsive-masonry v2.3.0
  • Update: Updated the react-dom v18.3.1
  • Update: Updated the react-modal-video v2.0.2
  • Update: Updated the react-router-dom v6.26.1
  • Update: Updated the swiper v11.1.12
  • Update: Updated the React Icons v5.3.0
  • Remove: Removed vendor.js file and import direct icons from react-icon
  • Admin Dashboard:
  • Add : Added new eCommerce Dashboard (index-ecommerce) Demo
  • Update: Updated the Tailwind v3.4.10
  • Update: Updated the Next Js v14.2.7
  • Update: Updated the React js v18.3.1
  • Update: Updated the react-countup v6.5.3
  • Update: Updated the react-dom v18.3.1
  • Update: Updated the react-router-dom v6.26.1
  • Update: Updated the React Icons v5.3.0
  • Update: Updated the @fullcalendar/daygrid v6.1.15
  • Update: Updated the @fullcalendar/react v6.1.15
  • Update: Updated the @ckeditor/ckeditor5-build-classic v43.0.0
  • Update: Updated the @ckeditor/ckeditor5-react v9.0.0
  • Update: Updated the simplebar-react v3.2.6
  • Remove: Removed vendor.js file and import direct icons from react-icon

Version v2.2 - 9th 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
  • Fix: Fixed some minor issues in Navbar menu
  • Update: Updated CSS to SCSS and also you can change inline css as per Tailwind CSS in code
  • 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 CSS to SCSS and also you can change inline css as per Tailwind CSS in code

Version v2.1 - 11th December 2023

  • Landing:
  • Add : Added new Christmas (index-christmas) demo
  • Add : Added new Classic Business (index-classic-business) demo
  • Remove: Removed the listner with a cleanup function
  • Update: Updated Data file and moved all the variable declaration out side of the components
  • Remove: Removed useClient from server components
  • Add : Added new Components (components.html) page
  • Update: Updated the Tailwind Version 3.3.6
  • Update: Updated the Next Version 14.0.4
  • Update: Updated the React Countup 6.5.0
  • Update: Updated the React Icons Version 4.12.0
  • Update: Updated the React router dom Version 6.20.0
  • Update: Updated the React scroll Version 1.9.0
  • Update: Updated the React Select Version 5.8.0
  • Update: Updated the React TYpe Animation Version 3.2.0
  • Update: Updated the Swiper Version 11.0.5
  • Admin Dashboard:
  • Add : Added new Cryptocurrency (index-crypto) demo
  • Update: Updated the Tailwind Version 3.3.6
  • Update: Updated the Next Version 14.0.4
  • Update: Updated the React Countup 6.5.0
  • Update: Updated the React Icons Version 4.12.0
  • Update: Updated the React router dom Version 6.20.0
  • Update: Updated the React scroll Version 1.9.0
  • Update: Updated the React Select Version 5.8.0
  • Update: Updated the React ckeditor Version 6.2.0
  • Update: Updated the Full calendar Version 6.1.10
  • Update: Updated the Full calendar react Version 6.1.10

Version v2.0 - 22nd 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
  • Update: Updated the Next Version 13.5.2
  • Update: Updated the React Icons Version 4.11.0
  • Update: Updated the React router dom Version 6.16.0
  • Update: Updated the Swiper Version 10.2.0
  • Admin Dashboard:
  • Add : Added Admin Panel

Version v1.0 - 21st August 2023

  • Initial Released