Introduction
A modern, feature-rich React Admin Dashboard built with React 19, TypeScript, and Tailwind CSS — packed with advanced complex logic features that go far beyond a typical template.
Tech Stack
Installation
Get up and running in minutes.
Step 1: Extract the Package
After downloading from ThemeForest, extract the ZIP file to your desired location.
Step 2: Install Dependencies
cd adminex
npm installStep 3: Start Development Server
npm run devhttp://localhost:5173
Step 4: Build for Production
npm run build
npm run previewFolder Structure
Organized and scalable architecture.
adminex/
├── public/
│ └── assets/ # Static assets
│ ├── avatars/
│ ├── blogs/
│ ├── products/
│ └── logo/
├── src/
│ ├── components/ # Reusable components
│ │ ├── charts/
│ │ ├── common/
│ │ └── dashboard/
│ ├── context/ # React Context
│ ├── data/ # Mock data
│ ├── features/ # Advanced feature modules
│ │ ├── approval-engine/
│ │ ├── notification-pipeline/
│ │ ├── query-builder/
│ │ ├── real-time-simulation/
│ │ ├── rule-engine/
│ │ ├── smart-insights/
│ │ ├── task-scheduler/
│ │ └── workflow-builder/
│ ├── hooks/ # Custom hooks
│ ├── i18n/ # Internationalization
│ │ └── locales/
│ ├── layouts/ # Page layouts
│ ├── pages/ # Page components
│ ├── routes/ # Router config
│ ├── styles/ # Global CSS
│ └── types/ # TypeScript types
├── package.json
├── vite.config.ts
└── tsconfig.jsonKey Features
Everything you need to build amazing admin apps — and more.
8 Advanced Features
Rule Engine, Workflow Builder, Task Scheduler & more.
Fully Responsive
Works on all screen sizes from mobile to 4K.
Dark Mode
Beautiful dark theme with system detection.
10 Languages
Built-in i18n with RTL support.
6 Color Themes
Blue, Purple, Green, Orange, Red, Cyan.
7+ Chart Types
Area, Bar, Line, Pie, Radar, Candlestick & more.
RTL Support
Full right-to-left support for Arabic, Urdu, Hebrew.
Dashboards
4 unique dashboard layouts.
Applications
8 full-featured applications.
Advanced Features
8 complex logic features with production-grade architecture — not just UI, but real engines and builders.
Rule Engine
Visual rule builder with conditional logic, nested groups, and real-time evaluation.
Query Builder
Dynamic query construction with drag-and-drop fields, operators, and SQL/JSON preview.
Real-Time Simulation
Live data streaming dashboard with configurable sources and real-time charts.
Smart Insights
AI-powered analytics with anomaly detection, trend analysis, and actionable recommendations.
Workflow Builder
Visual workflow designer with node-based canvas, templates, and conditional branching.
Approval Engine
State machine-powered approval workflows with role-based routing and audit trails.
Task Scheduler
Advanced task management with Gantt charts, dependency graphs, and cron scheduling.
Notification Pipeline
Multi-channel notification system with templates, routing rules, and delivery tracking.
Feature Architecture
Each feature follows a modular, self-contained architecture:
src/features/{feature-name}/
├── types.ts # TypeScript interfaces
├── engine.ts # Core business logic
├── config.ts # Default configurations
├── use{Feature}.ts # Custom React hook
└── components/ # Feature UI components
├── {Feature}Dashboard.tsx
└── ...Theming
6 built-in color themes with customizable CSS variables.
Available Color Themes
Blue
#3b82f6
Default theme
Purple
#ec4899
Pink-based palette
Green
#22c55e
Fresh & eco-friendly
Orange
#f97316
Warm & energetic
Red
#ef4444
Bold & attention-grabbing
Cyan
#06b6d4
Cool & modern
Change Theme Color
import { useTheme } from '@/hooks/useTheme';
const { setColor } = useTheme();
// Change to any available theme
setColor('blue'); // Default
setColor('purple'); // Pink-based
setColor('green'); // Fresh
setColor('orange'); // Warm
setColor('red'); // Bold
setColor('cyan'); // CoolTheme Implementation
Colors are defined in src/types/theme.ts and applied via CSS variables:
-
--theme-primary- Main theme color -
--theme-accent- Complementary accent color -
Persists to localStorage automatically -
Works seamlessly with dark mode
Dark Mode
Light, Dark, or System preference.
Toggle Dark Mode
import { useTheme } from '@/hooks/useTheme';
const { theme, setTheme } = useTheme();
setTheme({ ...theme, mode: 'dark' }); // Dark
setTheme({ ...theme, mode: 'light' }); // Light
setTheme({ ...theme, mode: 'system' }); // SystemRTL Support
Right-to-left language support.
setTheme({ ...theme, direction: 'rtl' });Languages
10 built-in languages.
Add New Language
// 1. Create: src/i18n/locales/ko.json
// 2. Register in src/i18n/index.ts
import ko from './locales/ko.json';
const locales = { ...existingLocales, ko };Changelog
Version history.
Version 1.0.0
LatestJanuary 27, 2025
Initial release:
-
4 Dashboard variants -
8 Full applications -
8 Advanced features (Rule Engine, Query Builder, Real-Time Simulation, Smart Insights, Workflow Builder, Approval Engine, Task Scheduler, Notification Pipeline) -
7 Chart types -
Dark mode support -
10 Languages with RTL -
8 Color themes -
70 AI-generated images
Support
Get help when you need it.
If this documentation doesn't answer your questions, contact us via:
We are located in GMT +5:30 time zone and answer all questions within 12-24 hours on weekdays. In rare cases, waiting time can be up to 48 hours.
Support only extends to verified buyers for bugs and errors. Custom modifications or third-party implementations are not included.
Don't forget to Rate ⭐⭐⭐⭐⭐
Go to your Codecanyon Profile → Downloads Tab → Rate & Review.
Thank you for your support!