Explore Our Platform
Preview our pages and access documentation
Demos
Demos
Chatbot
Dashboard
Content Tools
Analytics
Subscription
Settings
Auth Pages Demos
Demos
Login Page
Register 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
- 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.0 | Core React library (latest version) |
react-dom |
^19.2.0 | React DOM rendering |
react-router-dom |
^7.9.5 | Routing for React applications |
typescript |
~5.9.3 | TypeScript language support |
vite |
^7.2.2 | Next-generation frontend build tool |
tailwindcss |
^4.1.17 | Utility-first CSS framework |
framer-motion |
^12.23.24 | Animation library for React |
@radix-ui/* |
^1.1.x - ^2.2.x | Unstyled, accessible UI components |
lucide-react |
^0.553.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.
