OkyAi is a modern HTML dashboard template with an AI chatbot interface, content tools, voice UI, analytics views, and subscription screens. Built with Tailwind CSS v4, DaisyUI, GSAP, Chart.js, and Gulp — suitable for SaaS and admin dashboards.
Preview our pages and access documentation
Standard License – Use this item in one end product for personal or business purposes, or client work.
Unlimited Projects – Allows use of this item in an unlimited number of end products and client projects.
Commercial – Allows the end products to be sold or offered with subscription or paid access.
Welcome to the OkyAi documentation. OkyAi is an HTML dashboard template with a chatbot UI, content tools, analytics, and subscription screens. It is built with Tailwind CSS v4, DaisyUI, GSAP, Chart.js, and Gulp. Demo data and responses are for preview; connect your own backend or APIs for production.
Intelligent conversational AI assistant with voice UI, file uploads, and simulated responses
Grid & list views with search, filter, and category grouping — all built with Tailwind & DaisyUI
Chart.js powered dashboards with area, bar, and line charts — animated on every page load
OKYAi/
├── src/
│ ├── html/
│ │ ├── index.html # Dashboard (home)
│ │ ├── analytics.html # Analytics page
│ │ ├── chatbot.html # AI chatbot interface
│ │ ├── content-tools.html # Content tools page
│ │ ├── login.html # Login page
│ │ ├── register.html # Register page
│ │ ├── settings.html # Settings page
│ │ ├── subscription.html # Subscription page
│ │ ├── not-found.html # 404 error page
│ │ ├── server-error.html # 500 error page
│ │ └── partials/
│ ├── js/
│ │ ├── layout.js # Shared layout logic (loader, active links)
│ │ ├── main.js # Global init
│ │ └── pages/ # Per-page scripts
├── gulpfile.js # Gulp build pipeline
├── postcss.config.mjs # PostCSS config (Tailwind v4)
├── package.json
└── README.mdAll HTML pages and partials. Pages use
%%include() to compose layouts from reusable partial files.
Reusable HTML partials split into
layout/ (header, sidebar, footer) and components/
(cards, stats, tool items)
Per-page JavaScript files handling charts, GSAP animations, form logic, and interactive UI behaviour
Gulp compiled output — processed HTML, minified CSS & JS, copied images, fonts, and third-party plugins
npm installgulpnpx tailwindcss -i ./src/css/input.css -o ./build/css/input.css --watchHere are the key dependencies and their versions used in OKYAi project:
| Package | Version | Description |
|---|---|---|
tailwindcss |
^4.2.4 | Utility-first CSS framework (v4) |
@tailwindcss/postcss |
^4.1.17 | Tailwind CSS PostCSS plugin |
@tailwindcss/cli |
^4.2.4 | Tailwind CSS CLI tool |
daisyui |
^5.5.19 | Component library built on Tailwind CSS |
gsap |
^3.14.2 | GreenSock Animation Platform for JS animations |
chart.js |
^4.5.1 | HTML5 canvas-based charting library |
lucide |
^1.11.0 | Beautiful & consistent icon set (vanilla JS) |
postcss |
^8.5.6 | CSS transformation tool |
| Package | Version | Description |
|---|---|---|
gulp |
^5.0.1 | Task runner and build pipeline |
gulp-file-include |
^2.3.0 | HTML partial includes with %%include() |
gulp-postcss |
^10.0.0 | Run PostCSS (Tailwind) through Gulp |
gulp-babel |
^8.0.0 | Transpile modern JS to ES5 |
gulp-uglify |
^3.0.2 | Minify JavaScript files |
gulp-concat |
^2.6.1 | Concatenate JS files into a bundle |
gulp-rename |
^2.1.0 | Rename files in the pipeline |
browser-sync |
^3.0.4 | Live reload dev server |
autoprefixer |
^10.4.23 | Auto-add vendor prefixes to CSS |
@babel/core |
^7.28.4 | Babel compiler core |
@babel/preset-env |
^7.28.3 | Babel preset for modern JS transpilation |
src/html/index.html - Main dashboard
src/html/chatbot.html - AI chatbot interface
src/html/analytics.html - Analytics dashboard
src/html/content-tools.html - 45+ content tools
src/html/settings.html - User settings
src/html/subscription.html - Subscription plans
src/html/login.html - Login page
src/html/register.html - Register page
partials/layout/header.html - Top navigation bar
partials/layout/sidebar.html - Sidebar navigation
partials/layout/drawer-menu.html - Mobile drawer
partials/layout/footer.html - Footer
partials/layout/meta.html - Head meta tags
partials/layout/footer-js.html - Script includes
partials/components/ - Reusable UI cards & items
src/css/input.css - Tailwind entry & theme variablespostcss.config.mjs - PostCSS / Tailwind configgulpfile.js - Build pipeline taskspackage.json - Project dependenciessrc/js/layout.js - Shared layout logicsrc/js/pages/ - Per-page JS scriptsCustomize your theme colors by editing CSS variables in
src/css/input.css
/* In src/css/input.css */
:root {
--primary: oklch(0.58 0.26 286.82);
--sidebar-primary: oklch(60.779% 0.2717 319.782);
--background: oklch(13.558% 0.02475 282.596);
--foreground: oklch(0.984 0.003 247.858);
--card: oklch(100% 0.00011 271.152 / 0.06);
--border: oklch(100% 0.00011 271.152 / 0.12);
--accent: oklch(0.279 0.041 260.031);
--muted: oklch(0.279 0.041 260.031);
--destructive: oklch(0.704 0.191 22.216);
--chart-1: oklch(0.58 0.26 286.82);
--chart-2: oklch(0.696 0.17 162.48);
}OKYAi uses the Satoshi font loaded locally from
src/fonts/. Swap it by replacing the @font-face blocks in
src/css/input.css.
/* In src/css/input.css */
@font-face {
font-family: "Satoshi";
src: url("../fonts/Satoshi-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Applied via Tailwind @theme */
--font-sans: "Satoshi", ui-sans-serif, system-ui, sans-serif;We offer 6 months of support for any questions or issues you may encounter.
Discover the powerful technologies and tools that make our platform exceptional
Task Automation
Utility-First CSS Framework
Web Structure
Modern Styling
Mobile Friendly
Web Typography
Vector Graphics
Clean Aesthetics
Flexible Components
Optimized Structure
Clear Guides
Always Available