Download Now

Techwind - Angular 19 Multipurpose App, Saas & Software Landing & Admin Dashboard Template

Introduction

Techwind is a Powerful App, Saas & Software Angular 19 Multipurpose Landing & Admin Dashboard Template. It is a beautifully handcrafted, pixel-perfect landing page template and admin dashboard template based on the Angular v19.x & Tailwind CSS v4.0.10. It is an excellent template for startups, cloud hosting, business, corporate, minimal portfolio single products (Smartwatch), Saas, Social media marketing, Digital marketing/agency, Email Templates, Marketing, Agency, Careers and Jobs, Helpcenter, and much more. It is 100% responsive and looks stunning on all types of screens and devices. Users will love your site because it gives them a unique user experience (UX), and a clean, modern & beautiful design. They are also easy to customize and combine with other components.

Admin Dashboard: We have added a Admin Dashboard Template

Dark & RTL version Available: We have added a Dark & RTL Theme

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

Setup Angular

Introduction

We are using npm which allows having complete automation for build flow. 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 template or 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.
ng s Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:4200.
ng build Generates a /build or dist directory with all the production files.

Folder & File Structure

Techwind_Angular_v3.0.0
│
├──  Documentation   
├──  Techwind_Angular
	│
	├──  Landing
	└──  Dashboard

Landing
│
├──  src folder
│   └──  app
│       └──  pages
│           └──  index
│               └──  index.component.html
│               └──  index.component.scss
│               └──  index.component.spec.ts
│               └──  index.component.ts
│           └──  index-two
│               └──  index-two.component.html
│               └──  index-two.component.scss
│               └──  index-two.component.spec.ts
│               └──  index-two.component.ts
│           └── .... (all pages)
│           
│       └──  components
│           └──  about
│               └──  about.component.html
│               └──  about.component.scss
│               └──  about.component.spec.ts
│               └──  about.component.ts
│           └── .... all components are here,
│
│       └──  app.component.html
│       └──  app.component.scss
│       └──  app.component.spec.ts
│       └──  app.component.ts
│       └──  app.config.ts
│       └──  app.routes.ts
│           
│   └──  assets
│       └──  fonts
│       └──  images
│       └──  libs
│       └──  js
│       └──  css
│           └──  all css files are here,
│           │
│           └──  tailwind.css
│ 
└──  angular.json
└──  package.json
└──  tsconfig.app.json
└──  tsconfig.json
└──  tsconfig.spec.json
Dashboard
│
├──  src folder
│   └──  app
│       └──  pages
│           └──  dashboard
│               └──  index
│                   └──  index.component.html
│                   └──  index.component.scss
│                   └──  index.component.spec.ts
│                   └──  index.component.ts
│               └──  index-crypto
│                   └──  index-crypto.component.html
│                   └──  index-crypto.component.scss
│                   └──  index-crypto.component.spec.ts
│                   └──  index-crypto.component.ts
│           └── apps
│               └──  all app pages
│                   
│           └── auth
│               └──  all auth pages
│                   
│           └── blog
│               └──  all blog pages
│                   
│           └── e-commerce
│               └──  all shop pages
│                   
│           └── email-template
│               └──  all email template pages
│                   
│           └── gallery
│               └──  all gallery pages
│                   
│           └── .... (all pages folder)
│           
│       └──  components
│           └──  all components are here,
│
│       └──  app.component.html
│       └──  app.component.scss
│       └──  app.component.spec.ts
│       └──  app.component.ts
│       └──  app.config.ts
│       └──  app.routes.ts
│           
│   └──  assets
│       └──  fonts
│       └──  images
│       └──  libs
│       └──  js
│       └──  css
│           └──  all css files are here,
│           │
│           └──  tailwind.css
│ 
└──  angular.json
└──  package.json
└──  tsconfig.app.json
└──  tsconfig.json
└──  tsconfig.spec.json

How to change the color in Techwind?

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

How to change the fonts family in Techwind?

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 Angular:

Plugin Version
tailwindcss 4.0.12 Updated
@tailwindcss/postcss 4.0.12 Added
@angular/core 19.0.0
@ng-select/ng-select 12.0.6
choices.js 10.2.0
feather-icons 4.29.2
ngx-countup 13.2.0
ngx-typed-js 2.1.1
postcss-scss 4.0.9
@yoozly/ngx-parallax 17.0.0
aos 2.3.4
@tailwindcss/forms 0.5.10
lightgallery 2.8.2
swiper 11.2.1
tiny-slider 2.9.4
simplebar-angular 3.2.6
simplebar 6.3.0
ng2-ckeditor 1.3.7
ng-apexcharts 1.15.0

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.0.0 - 12th March 2025

  • Landing
  • Update : Updated Tailwind CSS v4.0.12
  • Add : Added @tailwindcss/postcss v4.0.12
  • 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 Tailwind CSS v4.0.12
  • Add : Added @tailwindcss/postcss v4.0.12
  • 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 - 29th January 2025

  • Landing
  • Update : Updated Tailwind CSS v3.4.17
  • Update : Updated Angular v19.0.0
  • Update : Updated @tailwindcss/forms v0.5.10
  • Update : Updated @yoozly/ngx-parallax v17.0.0
  • Update : Updated Swiper v11.2.1
  • New : Added New aos v2.3.4
  • Update : Updated lightgallery v11.2.1
  • Add : Added new Solar / Green Energy (index-solar) Demo
  • Update : Updated And Added Animation on Index Saas Demo
  • Admin Dashboard:
  • Update : Updated Tailwind CSS v3.4.17
  • Update : Updated Angular v19.0.0
  • Update : Updated @tailwindcss/forms v0.5.10
  • Update : Updated lightgallery v11.2.1
  • Update : Updated ng-apexcharts v1.15.0
  • Update : Updated simplebar v6.3.0

Version v2.3.0 - 7th September 2024

  • Landing
  • Update : Updated Tailwind CSS v3.4.10
  • Update : Updated Angular v18.2.3
  • Update : Updated Some related plugin or dependencies of Angular v18.2.3
  • Update : Updated Ngx CountUp v13.2.0
  • Update : Updated Swiper v11.1.12
  • Add : Added new Web Programming (index-web-programming) demo
  • Add : Added new Index Cleaner (index-cleaner) demo
  • Add : Added new Page Service Detail (page-service-detail) demo
  • Admin Dashboard:
  • Update : Updated Tailwind CSS v3.4.10
  • Update : Updated Angular v18.2.3
  • Update : Updated Some related plugin or dependencies of Angular v18.2.3
  • Update : Updated Ngx CountUp v13.2.0
  • Update : Updated Apexcharts v3.53.0
  • Add : Added new Index Ecommerce (index-ecommerce) demo

Version v2.2.1 - 28th June 2024

  • Update : Updated Tailwind CSS v3.4.4
  • Update : Updated Angular v18.0.5
  • Update : Updated Some related plugin or dependencies of Angular v18.0.5

Version v1.0 - 1st March 2024

  • Initial Released