VaatBot - AI Chatbot UI Template Built with React & Tailwind CSS 4.1

Explore Our Platform

Preview our pages and access documentation

Our Pages

Explore our Comprehensive AI Chatbot Platform

Home Page 1

Home Page 2

Home Page 3

Home Page 4

Inner Pages

Explore our Comprehensive AI Chatbot Platform

About Page

Services Page

Pricing Page

Blog Page

Contact Page

Auth Pages

Explore our comprehensive chatbot platform

Login Page

Register Page

Forgot Password Page

Verification Page

New Password Page

Other Pages

Explore our comprehensive chatbot platform

Error Page

Server Error Page

Coming Soon Page

Under Maintenance Page

Introduction

🛒 License Information

Standard License – Use this item in one end product for personal or business projects and client work.

Unlimited Projects Add-on – Allows use of this item in an unlimited number of end products and client projects.

Commercial Add-on – Allows the end products to be sold or offered with subscription or paid access.

Important License Notice Each Standard License is valid for a single end product only.

Official License Terms

VaatBot is a modern AI chatbot platform. Built with React.js and Tailwind CSS, it features beautiful UI and responsive design, ensuring a great experience for users.

Many Hero Section Design

Many Hero Section Design with different layouts

Pricing

Detailed pricing and subscription options

Blog

Detailed blog and discussion listings

Folder Structure

Source Files/
├── documentation/
├── public/
│   ├── images/
│   │   ├── logo/
│   │   └── user/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── home/
│   │   └── ui/
│   ├── context/
│   ├── data/
│   ├── hooks/
│   ├── layout/
│   ├── lib/
│   ├── pages/
│   ├── router/
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── CHANGELOG.md
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── README.md
└── vite.config.js

Key Directories:

public/images/

Contains all static assets including logos, avatars, illustrations, and background graphics.

src/components/

Modular React components divided into home/ (landing sections) and ui/ (animated controls & widgets).

src/context/

React context providers managing Light/Dark modes, RTL layout direction, and dynamic color customization.

src/data/

Houses mockdata.json supplying dummy data for pricing tiers, features, blogs, FAQs, and testimonials.

src/layout/

Core shell architecture including floating glass Navbar, responsive Footer, 3D AI Loader, and Layout wrapper.

src/pages/

Top-level page views including 4 unique Home demos, 4 Authentication screens, and 15+ modern inner pages.

src/router/

Application route mappings and navigation architecture defined inside RoutesPath.jsx using React Router v7.

src/hooks/ & src/lib/

Custom hooks like useScrollToTop and utility helpers like utils.js (Tailwind merge & clsx).

Changelog

2.0.0 27.10.2026 - Major UI Redesign & New Auth Pages

Main Hero Section UI Update: Modernized layout with dual-mode visuals & responsive support
Navbar Redesign: Ultra-premium floating glass navbar with Home demo dropdown & mobile drawer
New Auth Pages Added: Added 3 new authentication pages — Forgot Password, OTP Verification, and Confirm Password
Auth Pages Redesign: Ultra-premium ambient blur background with cyber grid & responsive support
Loader UI Update: Ultra-premium AI loader with 3D effects & responsive support
Dark Mode Support: Seamless dark mode integration across all pages & components
RTL Mode Support: Complete Right-to-Left (RTL) layout and directional styling support
Code Refactoring: Optimized styles and utility classes
Footer Redesign: Ultra-premium responsive layout with newsletter card & RTL support
Hero Redesign: Revamped Services & Contact hero sections with responsive cyber effects & RTL support
React & React DOM: 19.1.0 → 19.3.1
React Icons: 5.6.0 → 5.7.0
React Router DOM: 7.6.3 → 7.18.4
Tailwind CSS: 4.1.11 → 4.3.3

1.5.0 08.06.2026 - Core Dependency & Class Updates

Code Refactoring: Replaced and optimized all old CSS classes with modern, streamlined new classes for better performance and maintainability.
GSAP Upgraded: Updated GSAP plugin to the latest version 3.15.0 for smoother animations and transitions.
Motion Upgraded: Updated Motion library to version 12.40.0 to enhance core interactions.
Icons Pack Updated: Upgraded React Icons to version 5.6.0, adding new icon support.

1.4.0 02.01.2026 - Minor Bug Fixes

Resolved responsive layout inconsistencies across multiple screen sizes
Fixed alignment issues in specific sections on mobile devices
Improved overall UI stability and cross-browser compatibility

1.3.2 05.12.2025 - Minor Bug Fixes

Fixed Minor Bugs

1.3.0 02.12.2025 - Color Customization System

Added dynamic color customization system with 4 unique themes
Added floating settings panel with theme switcher
Created comprehensive color system documentation
Fixed Minor Bugs

1.2.0 24.10.2025 - Add New Pages

Add About Page
Add Services Page
Add Contact Page
Fixed Minor Bugs

1.0.0 14.06.2025 - Initial Release

Initial release of VaatBot platform
4 unique hero sections with distinct designs
Modern UI with Tailwind CSS integration
Responsive layout that works on all devices
Custom font integration (Nunito & Tourney)
Interactive components with smooth animations
Comprehensive documentation
SEO-optimized structure
Modern authentication flows
Performance optimized build

Installation Guide

Install Dependencies

npm install

Start Development Server

npm run dev

Package Dependencies

Here are the key dependencies and their versions used in this project:

Package	Version	Description
`@react-three/drei`	^10.7.6	Useful helpers for react-three-fiber
`@react-three/fiber`	^9.3.0	A React renderer for Three.js
`@tailwindcss/vite`	^4.3.3	Tailwind CSS plugin for Vite
`clsx`	^2.1.1	A tiny utility for constructing className strings conditionally
`gsap`	^3.15.0	Professional-grade animation library for JavaScript
`motion`	^12.40.0	Animation library for the web
`react`	^19.3.1	Core React library for building user interfaces
`react-dom`	^19.3.1	React DOM rendering for web applications
`react-icons`	^5.7.0	SVG icons for React projects
`react-router-dom`	^7.18.4	Routing library for React applications
`swiper`	^11.2.10	Modern mobile touch slider
`tailwind-merge`	^3.3.1	Merge Tailwind CSS classes without style conflicts
`tailwindcss`	^4.3.3	A utility-first CSS framework
`three`	^0.178.0	3D library for the web
`vite`	^7.0.3	Next generation frontend tooling & development server

File Customization

Main Components

src/layout/ - Common layouts and navigation
src/components/home/ - Components for home page and discussions
src/components/ui/ - Reusable common UI components
src/pages/SignIn.jsx - Components for authentication
src/pages/ForgotPassword.jsx - Forgot Password recovery page
src/pages/Verify.jsx - 2FA / OTP Verification page
src/pages/ConfirmPassword.jsx - Confirm & Reset Password page

Feature Pages

src/pages/Home.jsx - Default home page with a clean, modern layout featuring a hero section.
src/pages/Home2.jsx - Alternative layout with a geometric hero section, followed by all standard sections in a modern, visually appealing design.
src/pages/Home3.jsx - Third layout variant with a custom hero section (HeroSection3) and the same comprehensive sections as other home pages.
src/pages/Home4.jsx - Fourth layout featuring HeroSection4 with a unique design, maintaining all standard sections for consistency.
src/pages/SignIn.jsx - Sign In & Sign Up page
src/pages/ForgotPassword.jsx - Forgot Password page
src/pages/Verify.jsx - OTP Verification page
src/pages/ConfirmPassword.jsx - Confirm Password page

Color & Font Customization (Tailwind CSS)

Color Customization

Theme colors are defined in src/index.css.

Example from `src/index.css`:

/* src/index.css */
@theme {
  /* Base Colors */
  --color-surface: #040D12;
  --color-primary: #5f5af7;
  --color-accent: #a594fd;

  --default-transition: "cubic-bezier(.405, 0, .025, 1)";

  /* Additional Colors */
  --color-muted: #94a3b8;
  /* For muted/disabled text */
  --color-border: #2d3748;
  /* For borders */
  --color-muted-foreground: #a1a1aa;

  /* Shadows */
  --shadow-xl: 0 20px 40px -10px rgba(255, 255, 255, 0.25);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}

Font Customization

The application uses two main fonts from Google Fonts: "Nunito" for body text and "Tourney" for titles. These are imported and configured in src/index.css.

1. Font Imports & Application (`src/index.css`)

/* src/index.css */
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tourney:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Apply fonts globally */
@layer base {
  body {
    font-family: 'Nunito', sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6, .font-title {
    font-family: 'Tourney', sans-serif;
    font-weight: 700;
  }
}

Credits

Resources

Unsplash - Images
Freepik - Graphics
React Icons - Icons

Frameworks

Tailwind CSS - UI Framework
Google Fonts - Typography
React.js - Frontend Framework

Support

Need Help?

We offer 6 months of support for any questions or issues you may encounter.

Contact Support Visit Website

Ultra-Premium AI Chatbot & SaaS React UI Template

Choose Your Preferred Tech Stack

React 19 + Tailwind CSS 4.3

Next.js 15 + Tailwind CSS