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

Pricing Page

Blog Page

Auth Pages

Explore our comprehensive chatbot platform

Login Page

Other Pages

Explore our comprehensive chatbot platform

Error Page

Server Error Page

Coming Soon Page

Under Maintenance Page

Introduction

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

main-file/
├── documentation/
├── public/
│   ├── images/
├── src/
│   ├── components/
│   │   ├── ui/
│   ├── data/
│   ├── hooks/
│   ├── pages/
│   ├── router/
│   ├── App.jsx
│   ├── index.css
│   ├── index.js
│   └── main.jsx
├── CHANGELOG.md
├── README.md
├── package.json
├── package-lock.json
├── tailwind.config.js
└── vite.config.js

Key Directories:

public/images/

Stores static images.

src/components/

Contains all reusable React components, organized by feature or type.

src/data/

Stores mock data, data fetching logic, or other data-related utilities.

src/layout/

Contains main layout components (e.g., Navbar, Footer).

src/pages/

Contains top-level page components, each corresponding to a specific route or view.

src/router/

Defines application routes and navigation logic.

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.5.0	Useful helpers for react-three-fiber
`@react-three/fiber`	^9.2.0	A React renderer for Three.js
`@tailwindcss/vite`	^4.1.11	Tailwind CSS plugin for Vite
`clsx`	^2.1.1	A tiny utility for constructing className strings conditionally
`motion`	^12.23.0	Animation library for the web
`react`	^19.1.0	Core React library for building user interfaces
`react-dom`	^19.1.0	React DOM rendering for web applications
`react-icons`	^5.5.0	SVG icons for React projects
`react-router-dom`	^7.6.3	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.1.11	A utility-first CSS framework
`three`	^0.178.0	3D library for the web

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

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

Changelog

Version	Date	Changes
1.0.0	2025-06-14	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

Support

Need Help?

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

Contact Support Visit Website

Modern UI made easy with Tailwind 4

Intelligent AI Chatbot for Seamless Conversations