AI-First React 19 TypeScript

Welcome to Adivo

A modern, production-ready React Admin Dashboard with a built-in AI Studio, 6 dashboard variants, 12+ applications, and 70+ pages — powered by React 19, TypeScript, Vite 7, and Tailwind CSS 4.

6

Dashboards

6

AI Tools

70+

Pages

10

Languages

Tech Stack

React 19 TypeScript 5.9 Vite 7 Tailwind CSS 4 React Router 7 Chart.js Tiptap Editor @dnd-kit Swiper Iconify (Solar)

Installation

Get up and running in under 2 minutes.

Requirements: Node.js 18+ and npm 9+ (or yarn / pnpm)

1

Extract the Package

After downloading from ThemeForest, extract the ZIP file to your desired location.

2

Install Dependencies

$ cd adivo
$ npm install

3

Start Development Server

$ npm run dev

App running at http://localhost:5173

4

Build for Production

$ npm run build
$ npm run preview

Folder Structure

Clean, modular, and scalable architecture.

adivo/
├── public/
│   └── assets/              # Static assets (avatars, logos, images)
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── ai/              # AI banner, floating chat widget
│   │   ├── charts/          # Chart components (7 types)
│   │   ├── common/          # Icon, Logo, ThemeCustomizer, Modal
│   │   └── dashboard/       # Dashboard-specific widgets
│   ├── context/             # ThemeContext provider
│   ├── data/                # Mock data for all apps
│   ├── hooks/               # useTheme, useLocale hooks
│   ├── i18n/                # Internationalization
│   │   └── locales/         # 10 language JSON files
│   ├── layouts/             # Layout components
│   │   ├── header/          # Top header bar
│   │   └── sidebar/         # Rail sidebar navigation
│   ├── pages/               # All page components
│   │   ├── apps/            # 12+ application pages
│   │   ├── auth/            # Login, Register, Forgot Password
│   │   ├── charts/          # Chart demo pages
│   │   ├── dashboard/       # 6 dashboard pages
│   │   ├── errors/          # 404, 500, 403, Maintenance
│   │   ├── forms/           # Form layout, validation, editor
│   │   ├── home/            # Landing page sections
│   │   ├── pages/           # Utility pages
│   │   └── tables/          # Simple, Data, CRUD tables
│   ├── routes/              # Router configuration
│   ├── styles/              # Global CSS (variables, fonts, base)
│   └── types/               # TypeScript type definitions
├── vite.config.ts
├── tsconfig.json
└── package.json

Dashboards

6 variants

Six unique, data-rich dashboard layouts for different business needs.

Overview

General KPIs, summary metrics, and quick insights

/dashboard

Analytics

Traffic stats, conversion funnels, and performance metrics

/dashboard/analytics

E-commerce

Sales, orders, revenue trends, and inventory

/dashboard/ecommerce

CRM

Lead pipeline, customer lifecycle, and activity tracking

/dashboard/crm

Project Hub

New

Team workload, project timelines, sprints, and milestones

/dashboard/project-hub

AI Security

New

Threat detection, risk scoring, and AI model monitoring

/dashboard/ai-security

AI Studio

6 Built-in AI Tools

A complete AI suite integrated directly into your dashboard — from conversational AI to image generation, content creation, and model management.

AI Hub

Central command for all AI tools — usage analytics, quick actions, and recent activity

AI Chat

Conversational AI interface with model selection, conversation history, and settings

Content Maker

Generate blog posts, marketing copy, and text with tone and length controls

Image Generator

Text-to-image generation with style presets, aspect ratio, and quality options

AI Builders

Code, component, and workflow generation with natural language

AI Models

Model management, comparison, accuracy/latency metrics, and deployment

Floating AI Chat Widget — An always-accessible AI assistant overlay, available from any page in the dashboard.

Important: AI API Usage Disclaimer

All AI features in this template are UI demonstrations only with simulated/mock data. To enable real AI functionality:

You must provide your own API keys from AI providers (OpenAI, Anthropic, Google, Stability AI, etc.)
You are responsible for all usage fees and costs incurred from third-party AI services
You must comply with the terms of service of each AI provider you use

This template does NOT include any API keys, AI service subscriptions, or free access to AI services. All AI-related costs are the sole responsibility of the buyer/user.

Applications

12+

Full-featured, production-ready applications with complete CRUD flows.

Email

Inbox, compose, folders

Chat

+ Voice & video call

Calendar

Events & scheduling

Contacts

Full CRUD management

Blog

List, detail, create

E-commerce

Products, cart, checkout

Notes

Categorized notes

Kanban

Drag & drop tasks

File Manager

Browse, upload, organize

Invoices

List, detail, track

Tickets

Support helpdesk

Pages & Authentication

Utility pages, auth flows, and error states.

Authentication Pages

Login — Side layout & Card layout

Register — Side layout & Card layout

Forgot Password

Utility Pages

Pricing, FAQ, Gallery

Account Settings, Typography

UI Elements Showcase, User Profile

Error Pages

404 Not Found 500 Server Error 403 Forbidden Maintenance

Charts & Visualization

7 chart types powered by Chart.js with consistent styling and dark mode support.

Line

Area

Column / Bar

Pie & Doughnut

Radar

Candlestick

Forms & Tables

Layout patterns, validation, rich editing, and data management.

Forms

Form Layout — Multiple layout patterns

Form Validation — Client-side validation

Rich Text Editor — Tiptap-based editor

Tables

Simple Table — Static data display

Data Table — Search, sort, pagination

CRUD Table — Create, read, update, delete

Theming

Adivo uses a unified brand color with a powerful theme customizer panel for layout options.

Brand Color

Soft Lavender Violet

#9689e8

Accent: #f0abfc

Theme Customizer Options

Mode

Light / Dark

Direction

LTR / RTL

Container

Full / Boxed

Card Style

Shadow / Border

Density

Compact / Default / Spacious

Border Radius

Sharp / Default / Rounded

Usage Example

import { useTheme } from '@/hooks/useTheme';

const { theme, setTheme } = useTheme();

// Toggle dark mode
setTheme({ ...theme, mode: 'dark' });

// Switch to boxed layout
setTheme({ ...theme, container: 'boxed' });

// Enable RTL
setTheme({ ...theme, direction: 'rtl' });

// Change card style
setTheme({ ...theme, cardStyle: 'border' });

Dark Mode

Seamless light/dark switching with persistent preference.

Light Mode

Clean & bright

Dark Mode

Optimized contrast

Persists to localStorage automatically

All components fully styled for both modes

Charts and graphs adapt automatically

RTL Support

Full right-to-left layout support for Arabic, Urdu, and Hebrew.

const { theme, setTheme } = useTheme();

// Enable RTL direction
setTheme({ ...theme, direction: 'rtl' });

The sidebar, header, all layouts, and content automatically mirror. RTL activates automatically when selecting Arabic or Urdu language.

Languages

10 built-in languages with easy extensibility.

🇺🇸English

🇪🇸Spanish

🇫🇷French

🇵🇹Portuguese

🇨🇳Chinese

🇯🇵Japanese

🇷🇺Russian

🇸🇦ArabicRTL

🇮🇳Hindi

🇵🇰UrduRTL

Add a New Language

// 1. Create: src/i18n/locales/ko.json
// 2. Copy en.json structure, translate values
// 3. Register in src/i18n/index.ts

import ko from './locales/ko.json';

const locales = { ...existingLocales, ko };

AI API Usage Disclaimer

Important

Please read carefully before using AI features.

UI Demonstration Only

All AI features included in Adivo (AI Chat, AI Content Maker, AI Image Generator, AI Models Management, AI Builders, and AI Hub) are user interface demonstrations only. They showcase rich, polished interfaces with simulated/mock data and do not connect to any live AI services out of the box.

API Keys Required

To enable real AI functionality, you must provide your own API keys from AI service providers such as OpenAI, Anthropic, Google, Stability AI, or others.

Usage Fees Apply

You are solely responsible for all usage fees and costs incurred from third-party AI services. API usage is billed directly by AI providers.

Terms Compliance

You must comply with the terms of service, usage policies, and content guidelines of each AI provider you choose to integrate.

Integration Required

The template provides ready-to-use UI components. Backend API integration must be implemented by you to connect to actual AI services.

What This Template Does NOT Include

Any API keys or credentials

AI service subscriptions

Free access to AI services

Ongoing AI service costs

Backend server implementation

Pre-configured API connections

Compatible AI Providers (Examples)

The UI is designed to work with popular AI providers. You'll need to sign up and obtain API keys from:

OpenAI (GPT-4, DALL-E) Anthropic (Claude) Google (Gemini) Stability AI Mistral AI Cohere Replicate

Changelog

Version history and release notes.

v1.0.0

Latest

Initial Release

6 Dashboard variants

6 AI Studio tools

12+ Full applications

70+ Total pages

7 Chart types (Chart.js)

Dark mode + theme customizer

10 Languages with RTL

Rail sidebar navigation

Floating AI chat widget

100% TypeScript

Lazy loading & code splitting

Landing page

Support

We're here to help.

If this documentation doesn't answer your question, reach out via our ThemeForest support page:

Open Support Page

We're in GMT +5:30 and respond to all queries within 12–24 hours on weekdays. In rare cases, response time may be up to 48 hours.

NOTE

Support covers bugs and errors for verified buyers only. Custom modifications and third-party integrations are not included in item support.

⭐⭐⭐⭐⭐

Enjoying Adivo?

Your rating means the world to us and helps other developers discover Adivo.

Go to Downloads → Rate & Review on your ThemeForest profile.