Explore Our Platform
Preview our pages and access documentation
Demos
Demos
Chatbot
Dashboard
Content Tools
Analytics
Subscription
Settings
Help & Support
Auth Pages Demos
Demos
Login Page
Register Page
Reset Password Page
Two Factor Authentication Page
Error Pages Demos
Demos
Error Page
Server Error Page
Quick Links
Introduction
🛒 License Information
Regular License – Use this for a single end product that users are not charged for. You can use this for your personal project or for one client.
Extended License – Use this for a single end product that users can be charged for (e.g., a SaaS platform or a product for sale). This is required for any commercial project where the end-user pays to use the service.
Important Note – Each license is valid for a single project only. For more details on Envato license terms, please visit the Official License Page.
Welcome to the OkyAi documentation. OkyAi is a React dashboard template with chatbot, content tools, analytics, and subscription screens. It is built with React 19, TypeScript, Tailwind CSS, and Radix UI. Demo data and responses are for preview; connect your own backend or APIs for production.
AI-Powered Chatbot
Intelligent conversational AI assistant for instant support and guidance
45+ Content Tools
Complete toolkit for data management, analytics, and AI assistance
Real-Time Analytics
Advanced insights with AI-powered trend detection and predictions
Folder Structure
OKYAi/
├── src/
│ ├── assets/ # Images, logos, and SVG components
│ ├── components/ # Reusable UI components
│ │ └── ui/ # Shadcn UI components
│ ├── font/ # Custom Satoshi font files
│ ├── hooks/ # Custom React hooks
│ ├── layout/ # Layout components (header, footer, sidebar)
│ ├── lib/ # Utility functions
│ ├── pages/ # Application pages
│ │ ├── auth/ # Authentication pages
│ │ ├── analytics.tsx # Analytics dashboard
│ │ ├── chatbot.tsx # AI chatbot interface
│ │ ├── content-tools.tsx # Content tools page
│ │ ├── dashboard.tsx # Main dashboard
│ │ ├── settings.tsx # User settings
│ │ └── subscription.tsx # Subscription management
│ ├── router/ # React Router configuration
│ ├── App.tsx # Main app component
│ └── main.tsx # Application entry point
├── public/
│ └── documentation/ # Documentation site
├── .gitignore
├── package.json
├── vite.config.ts
└── README.mdKey Directories:
src/pages/
Main application pages including chatbot, analytics, content tools, and subscription management
src/components/
Reusable UI components built with Radix UI and Shadcn
src/layout/
Layout components including header, footer, sidebar, and loader
src/hooks/
Custom React hooks for mobile detection and scroll behavior
Changelog
- Light Mode Theme - [NEW] Introduced a beautifully animated Light Mode theme for a visually stunning and comfortable user experience.
- RTL Layout Support - [NEW] Added comprehensive Right-to-Left (RTL) layout support, seamlessly integrating with logical CSS properties for global accessibility.
- Routing Optimization - [UPDATE] Streamlined initial routing flow to redirect users directly to the main Dashboard instead of the Login screen by default.
- Code Architecture - [IMPROVEMENT] Significant codebase refactoring and structural optimizations for enhanced performance and maintainability.
- Bug Fixes - [FIX] Addressed various minor UI glitches and improved overall application stability.
- Dependency Updates - [UPDATE] Safely upgraded core dependencies for improved security and performance:
react&react-dom: v19.2.0 → v19.2.8tailwindcss: v4.1.17 → v4.3.3vite: v7.2.2 → v7.3.6framer-motion: v12.23.24 → v12.43.0lucide-react: v0.553.0 → v0.577.0@radix-ui/*: Updated primitives to latest patch versions
- Help & Support Page - [NEW] Added a comprehensive support center with dynamic suggestions search, framer-motion collapsible FAQ accordions, and automated service diagnostics.
- ResetPassword Page - [NEW] Added secure credentials recovery screen.
- TwoFactorAuth Page - [NEW] Added two-step security validation interface.
- Dashboard Upgrades - Added Live AI Agentic Workers Monitor queue and Sentiment & CSAT Satisfaction trackers with full mobile responsive layouts.
- Minor UI & Theme Fixes - Migrated actionelements to the global shared Button components to enforce design consistency.
- AI-Powered Chatbot - Intelligent conversational assistant with natural language processing
- 45+ Content Tools - Complete toolkit including search, filters, AI insights, export tools, and integrations
- Real-Time Analytics - Advanced dashboard with trend detection, anomaly detection, and AI predictions
- Modern UI/UX - Built with React, TypeScript, Tailwind CSS, Framer Motion, and Radix UI components
- Subscription Management - Integrated billing and plan management system
Installation Guide
Install Dependencies
npm installStart Development Server
npm run devPackage Dependencies
Here are the key dependencies and their versions used in OKYAi project:
| Package | Version | Description |
|---|---|---|
react |
^19.2.8 | Core React library (latest version) |
react-dom |
^19.2.8 | React DOM rendering |
react-router-dom |
^7.18.2 | Routing for React applications |
typescript |
~5.9.3 | TypeScript language support |
vite |
^7.3.6 | Next-generation frontend build tool |
tailwindcss |
^4.3.3 | Utility-first CSS framework |
framer-motion |
^12.43.0 | Animation library for React |
@radix-ui/* |
^1.1.x - ^2.3.x | Unstyled, accessible UI components |
lucide-react |
^0.577.0 | Beautiful & consistent icon library |
recharts |
^2.15.4 | Composable charting library for React |
date-fns |
^4.1.0 | Modern JavaScript date utility library |
react-day-picker |
^9.11.1 | Flexible date picker component |
react-syntax-highlighter |
^16.1.0 | Syntax highlighting for code blocks |
simplebar-react |
^3.3.2 | Custom scrollbar component |
@fancyapps/ui |
^6.1.5 | JavaScript UI components (lightbox, carousel) |
ogl |
^1.0.11 | Minimal WebGL library for 3D graphics |
File Customization
Core Pages
-
pages/dashboard.tsx- Main dashboard page -
pages/chatbot.tsx- AI chatbot interface -
pages/analytics.tsx- Analytics dashboard -
pages/content-tools.tsx- 45+ content tools
Layout & Components
-
layout/header.tsx- Top navigation bar -
layout/leftsidebar.tsx- Sidebar navigation -
layout/footer.tsx- Footer component -
components/ui/- Shadcn UI components
Configuration Files
src/index.css- Global styles & themevite.config.ts- Vite configuration
tailwind.config.js- Tailwind setupcomponents.json- Shadcn config
router/routesPaths.tsx- Route definitionslib/utils.ts- Utility functions
Color & Font Customization
Color Customization
Customize your theme colors by editing CSS variables in src/index.css
Theme Colors (OKLCH Format)
// In src/index.css
:root {
--primary: oklch(49.706% 0.24691 293.51);
--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);
}Font Customization
OKYAi uses custom Satoshi font. Customize by editing font-face declarations.
Custom Font Setup
// In src/index.css
@font-face {
font-family: "Satoshi";
src: url(./font/Satoshi-Regular.otf) format("opentype");
font-weight: 400;
font-style: normal;
}
body {
font-family: "Satoshi", sans-serif;
}Credits
Core Technologies
- React 19 - Frontend Library
- TypeScript - Type Safety
- Vite - Build Tool
- Tailwind CSS - Styling Framework
UI Libraries
- Radix UI - Accessible Components
- Shadcn UI - Component Library
- Lucide Icons - Icon Library
- Framer Motion - Animations
Support
Need Help?
We offer 6 months of support for any questions or issues you may encounter.
