Zentic - AI Multipurpose Admin Dashboard Template

Thank you for purchasing Zentic! This documentation covers everything you need to install, configure, and customize your template in HTML, React or Next.js. Please read through it before reaching out to support — most common questions are answered here.

1. Item Name: Zentic - AI Multipurpose Admin Dashboard Template + RTL (HTML, React & Next.js)
2. Version: 2.0.0
3. Author: ThemiVerse
4. Support: https://helpdesk.themiverse.com/

Introduction

Zentic is a premium, AI-powered, multipurpose admin dashboard template built on Bootstrap 5. Beyond a full AI workspace, it bundles complete Ecommerce, CRM, Project Management, and HRM modules — each with its own dashboard, list/detail/add/edit screens, analytics, interactive charts, maps, tables, and forms.

The template ships with a complete Appearance system: light and dark themes, a full right-to-left (RTL) layout mode, a compact/collapsible sidebar, toggleable UI animations, and a built-in language switcher — all controllable from the Settings page or the topbar, and all persisted to localStorage. It is fully responsive, feature-rich, and available as plain HTML (no build step), a React app and a Next.js app.

Key Features

Everything below ships in the box — no plugins to buy. Here is a quick overview of what Zentic includes, grouped by category.

3 Editions in One Package

• HTML — Bootstrap 5, plain HTML/CSS/JS, no build step
• React — React 19, Vite & React Router 7, code-split pages
• Next.js — App Router & React 19, deploy on Vercel or export static
• Same 129 pages, design, dark mode and RTL in every edition
• Separate step-by-step documentation for each edition
• One licence covers all three editions

Theme, Appearance & Design

• Dark & Light mode toggle (saved automatically)
• Full RTL / LTR layout support
• Compact, collapsible sidebar
• Built-in language switcher (English, French, German, Spanish & more)
• Notification settings — turn email/alert categories on or off
• Toggleable UI animations
• 100% responsive, mobile-friendly design
• Cross-browser compatible (Chrome, Firefox, Safari, Edge)

Code Quality

• W3C validated HTML
• Clean, commented code
• Easy to customize — colors & fonts in one CSS file
• Well organized folder structure
• HTML edition needs zero build tools
• Modular, reusable components

Dashboards & Modules

• 8 dashboards (AI, Ecommerce, CRM, Project, HR & more)
• Full AI workspace — Chat, Playground, Agents, Workflows
• Ecommerce module — products, orders, customers, reviews
• CRM module — leads, companies, deals pipeline
• Project management — tasks, boards, team workload
• HRM module — employees, attendance, leave, payroll
• Everyday apps — Calendar, Kanban, Chat, Inbox, File Manager
• Drag & drop Kanban board

Pages & Components

• 129 production-ready HTML pages
• Auth & error pages (Login, Signup, 404, 500 & more)
• Utility pages — Profile, Settings, Invoice, FAQ & more
• 9 Chart.js chart types
• Interactive maps (Leaflet & vector world map)
• 3 table systems — Basic, DataTables, Grid.js
• 1,000+ Lucide icons
• GLightbox gallery & Mermaid diagrams

Support & Updates

• Lifetime free updates
• Dedicated helpdesk support
• Optimized for offline use

What's Included

After downloading the package from your ThemeForest account and extracting the ZIP, you will see three template folders — one for each technology — plus this documentation and the licence files:

Zentic/
├── html/              HTML edition    — plain HTML / CSS / JS, no build step
├── react/             React Edition Added.
├── nextjs/            Nextjs Edition Added.
├── Documentation/     This documentation (open index.html)
├── LICENSING.txt      Licence information & third-party credits
├── CHANGELOG.txt      Version history
└── README.txt         Quick start for every edition
                    

All three editions contain the same 129 pages, the same design, light/dark mode and LTR/RTL support. Each folder is self-contained — you only need one of them for your project.

Which Edition to Use

Jump straight to the guide for your edition: HTML · React · Next.js.

Pages List (129 Pages)

File names below are from the HTML edition; React and Next.js use the same names as routes (for example ai-chat.html becomes /ai-chat). Zentic includes 129 production-ready pages grouped by dashboards, AI workspace, business modules (Ecommerce, CRM, Project Management, HRM), charts, tables, forms, UI components, apps, maps, auth screens, and utility pages.

  --- Dashboards & AI ---
  index.html                ← Main / AI Dashboard
  ai-analytics.html         ← AI Analytics
  ai-models.html            ← AI Models
  ai-usage.html              ← AI Usage Stats
  ecommerce-dashboard.html   ← Ecommerce Dashboard
  crm-dashboard.html         ← CRM Dashboard
  project-dashboard.html     ← Project Dashboard
  hr-dashboard.html          ← HR Dashboard

  --- AI Workspace ---
  ai-chat.html               ← AI Chat
  ai-playground.html         ← AI Playground
  ai-agents.html             ← AI Agents
  ai-workflows.html          ← AI Workflows
  ai-prompts.html            ← Prompt Library
  ai-training.html           ← Model Training
  ai-documents.html          ← AI Documents
  ai-api-keys.html           ← API Keys Manager

  --- Apps ---
  calendar.html               ← Calendar
  kanban.html                 ← Kanban Board
  chat.html                   ← Team Chat
  inbox.html                  ← Inbox
  file-manager.html           ← File Manager

  --- Users & Teams ---
  users.html                  ← Users List
  user-detail.html            ← User Detail
  edit-user.html               ← Edit User
  team.html                    ← Team

  --- Finance ---
  invoices.html                ← Invoices List
  invoice.html                 ← Single Invoice
  transactions.html            ← Transactions
  pricing.html                 ← Pricing

  --- Ecommerce ---
  product-list.html            ← Product List
  add-product.html             ← Add Product
  edit-product.html            ← Edit Product
  category-list.html           ← Category List
  add-category.html            ← Add Category
  edit-category.html           ← Edit Category
  order-list.html               ← Orders List
  order-details.html           ← Order Details
  customer-list.html           ← Customer List
  customer-overview.html       ← Customer Overview
  reviews.html                  ← Manage Reviews
  referrals.html                ← Referrals
  ecommerce-settings.html      ← Store Settings

  --- CRM ---
  leads-list.html               ← Leads List
  add-lead.html                 ← Add Lead
  edit-lead.html                ← Edit Lead
  lead-details.html             ← Lead Details
  companies-list.html           ← Company List
  add-company.html              ← Add Company
  edit-company.html             ← Edit Company
  deals-pipeline.html           ← Deals Pipeline
  add-deal.html                 ← Add Deal
  edit-deal.html                ← Edit Deal
  deal-details.html             ← Deal Details

  --- Project Management ---
  projects-list.html            ← Project List
  add-project.html              ← Add Project
  edit-project.html             ← Edit Project
  project-details.html          ← Project Details
  tasks-list.html                ← All Tasks
  add-task.html                  ← Add Task
  edit-task.html                 ← Edit Task
  task-details.html              ← Task Details
  team-workload.html             ← Team Workload

  --- HRM ---
  employees-list.html            ← Employee List
  add-employee.html              ← Add Employee
  edit-employee.html             ← Edit Employee
  employee-details.html          ← Employee Details
  departments-list.html          ← Department List
  add-department.html            ← Add Department
  edit-department.html           ← Edit Department
  attendance.html                 ← Attendance
  leave-requests.html             ← Leave Requests
  payroll-list.html               ← Payroll

  --- Charts ---
  charts-area.html              ← Area Charts
  charts-bar.html                ← Bar & Column Charts
  charts-funnel.html             ← Funnel & Timeline
  charts-heatmap.html            ← Heatmap Charts
  charts-line.html               ← Line Charts
  charts-mixed.html              ← Mixed Charts
  charts-pie.html                 ← Pie & Donut Charts
  charts-radar.html               ← Radar & Polar Area
  charts-scatter.html             ← Scatter & Bubble

  --- Tables ---
  basic-tables.html               ← Basic HTML Tables
  data-tables.html                ← DataTables (jQuery)
  grid-tables.html                ← Grid.js Tables

  --- Forms ---
  basic-forms.html                ← Basic Forms
  advanced-forms.html             ← Advanced Forms
  form-wizard.html                 ← Multi-Step Form Wizard

  --- UI Components ---
  ui-alerts.html                   ← Alerts
  ui-badges.html                   ← Badges
  ui-breadcrumb.html               ← Breadcrumb
  ui-button-group.html             ← Button Groups
  ui-buttons.html                  ← Buttons
  ui-cards.html                    ← Cards
  ui-dropdowns.html                ← Dropdowns
  ui-images.html                   ← Images & Figures
  ui-links.html                     ← Links
  ui-list-group.html               ← List Groups
  ui-navs-tabs.html                ← Navs & Tabs
  ui-pagination.html               ← Pagination
  ui-popovers.html                  ← Popovers
  ui-progress.html                  ← Progress Bars
  ui-spinners.html                  ← Spinners
  ui-toasts.html                    ← Toasts
  ui-tooltips.html                  ← Tooltips
  ui-typography.html                ← Typography

  --- Pages ---
  profile.html                      ← User Profile
  settings.html                     ← Settings (incl. Appearance tab)
  reports.html                      ← Reports
  notifications-page.html           ← Notifications
  timeline.html                     ← Timeline
  gallery.html                      ← Gallery (GLightbox)
  faq.html                           ← FAQ
  changelog.html                     ← Changelog
  search-results.html                ← Search Results
  blank.html                          ← Blank Starter Page
  all-pages.html                      ← All Pages Index

  --- Maps ---
  maps-leaflet.html                   ← Leaflet Interactive Map
  maps-vector.html                    ← Vector Maps

  --- Auth Pages ---
  login.html                          ← Sign In
  signup.html                         ← Sign Up
  forgot-password.html                ← Forgot Password
  reset-password.html                 ← Reset Password
  verify-email.html                   ← Verify Email
  two-factor.html                     ← Two-Factor Auth
  lock-screen.html                    ← Lock Screen

  --- Utility Pages ---
  404.html                            ← 404 Error
  500.html                            ← 500 Error
  coming-soon.html                    ← Coming Soon
  maintenance.html                    ← Maintenance
                    

HTML Edition

Plain HTML, CSS and JavaScript on top of Bootstrap 5. No build tools, no package manager — open html/index.html in a browser and it works. Every path below is relative to the html/ folder.

Installation

No build tools, no package managers, no compilers. The template is plain HTML/CSS/JS and works straight from the file system.

1. Download the All Files & Documentation package from your ThemeForest account.
2. Extract the ZIP archive on your computer.
3. Open the html/ folder inside the extracted archive. This folder contains all website files.
4. To preview locally: Open html/index.html directly in any modern browser (Chrome, Firefox, Safari, Edge). No local server is needed.
5. To publish online: Upload the entire contents of html/ to your web host using:
   • FTP client (e.g., FileZilla), or
   • cPanel → File Manager
6. After uploading, visit your domain to confirm everything works correctly.
7. Customize HTML content, colors, fonts, images, and appearance settings as described in the Customization section below.

File Structure

html/
├── index.html                         ← Main / AI Dashboard (start here)
├── [128 other .html pages]            ← See the Pages List above
└── assets/
    ├── css/
    │   ├── zentic.css                 ← Theme styles & CSS variables
    │   ├── zentic-icons.css           ← Lucide icon font classes
    │   ├── fonts/                     ← Icon font files
    │   └── vendor/                    ← Bootstrap (LTR + RTL), DataTables, Leaflet…
    ├── js/
    │   ├── zentic.js                  ← Core JS (sidebar, dark mode, RTL…)
    │   ├── charts.js                  ← Chart.js configurations
    │   ├── *-data.js                  ← Demo data (CRM, Ecommerce, HR, Projects)
    │   └── vendor/                    ← Third-party JS
    └── img/                           ← Logo, avatars, flags, products, gallery
                    

Change Logo

The logo is an SVG image located at:

assets/img/logo.svg

To replace it with your own logo:

1. Replace assets/img/logo.svg with your own logo file.
2. Keep the filename logo.svg — all HTML pages reference this path:
   
3. If you use a different filename, open every .html file and update the src attribute on the logo <img> tag.
4. The logo is also referenced as the browser favicon (<link rel="icon">) on every page — update that tag too if you switch to a raster favicon.

Change User Image

All avatar images are defined as :

assets/img/avatar/your-photo.jpg

1. Place your photo file inside assets/img/avatar/ — e.g. assets/img/avatar/your-photo.jpg.
2. Update the src attribute to point to your file.
3. Update the alt attribute to the user's name for accessibility.
4. Repeat in every .html page where the avatar appears — topbar, sidebar footer, profile page, and any user cards you wish to update.

Recommended image size: 128 × 128 px minimum, square crop, JPEG or WebP. The CSS automatically constrains the image to a circle using border-radius: 50%.

Changing Colors

All global colors are defined as CSS custom properties (variables) at the top of:

assets/css/zentic.css

Open that file and locate the :root block. The key brand variables are:

• --zc-primary: #5046E5 — main brand color (violet); updates buttons, links, badges, active nav, and progress bars
• --zc-secondary: #06B6D4 — accent color (cyan)
• --zc-sidebar-bg: #FFFFFF — sidebar background
• --zc-body-bg: #F4F6FA — page background (light mode)
• --zc-card-bg: #FFFFFF — card background

Changing --zc-primary alone updates every element that references it site-wide — no need to hunt through individual component styles.

Dark mode colors are controlled via the [data-theme="dark"] block in the same file. Toggle dark mode at runtime by clicking the moon icon in the topbar, or press Ctrl+D / Cmd+D. The preference is saved to localStorage and persists across page reloads.

Tip: The file is organized with a detailed table of contents at the top — use your editor's Find (Ctrl+F) to jump to any section quickly.

Changing Fonts

Zentic uses two Google Fonts loaded via @import at the top of assets/css/zentic.css:

• Plus Jakarta Sans (weights 400–800) — body text and UI elements
• JetBrains Mono (weights 400–500) — monospace / code blocks

Both fonts are licensed under OFL-1.1 and are free for commercial use. The template works fully offline for all assets except these Google Fonts — see the self-hosting tip below.

To swap in different fonts:

1. Visit fonts.google.com and choose your preferred fonts.
2. Replace the @import url(...) line near the top of assets/css/zentic.css with the new Google Fonts embed URL.
3. Update the --zc-font-sans and --zc-font-mono CSS variables in the :root block to reference your new font names.

/* Example: swap to Inter + Fira Code */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --zc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --zc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

For fully offline / self-hosted fonts: Download the font files from Plus Jakarta Sans and JetBrains Mono, place the .woff2 files in assets/css/fonts/, then replace the @import with @font-face declarations pointing to those local files.

Changing Icons

Zentic uses the Lucide icon set, delivered as a self-hosted icon font — no CDN dependency, no internet required. The icon font files and CSS definitions are already bundled inside the template.

assets/css/zentic-icons.css   ← @font-face + all icon class definitions
assets/css/fonts/
    ├── lucide.woff2           ← Primary (modern browsers)
    ├── lucide.woff            ← Fallback
    ├── lucide.ttf             ← Fallback
    ├── lucide.eot             ← IE legacy
    └── lucide.svg             ← SVG fallback

To use an icon anywhere in the HTML, add the icon class to any element:

<i class="icon-home"></i>
<i class="icon-settings"></i>
<i class="icon-bar-chart-2"></i>
<i class="icon-user"></i>
<i class="icon-bell"></i>

Icon class names follow the Lucide icon name prefixed with icon-:

• Lucide name bar-chart-2 → class icon-bar-chart-2
• Lucide name file-text → class icon-file-text
• Lucide name calendar → class icon-calendar

Browse the full icon library at lucide.dev/icons. Find the icon you want, copy its name, and prepend icon-.

Dark & Light Mode

1. Click the moon/sun icon in the topbar — or press Ctrl+D (Cmd+D on Mac) — to switch modes instantly.
2. You can also switch it from Settings → Appearance.
   
3. Your choice is saved automatically, so it stays the same next time you open any page.
4. Every chart, color, and component updates instantly — no reload needed.

Right-to-Left / Left-to-Right (RTL / LTR) Layout

1. Click the direction icon in the topbar — or switch it from Settings → Appearance.
   
2. The whole layout flips: sidebar, menus, charts, and text all mirror correctly.
3. Your choice is saved automatically and applies across every page.
4. No extra setup needed — the RTL stylesheet is already built into every page.

<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css" id="bootstrapLtr">
<link rel="stylesheet" href="assets/css/vendor/bootstrap.rtl.min.css" id="bootstrapRtl" disabled>

Upload to a Server

1. Connect to your hosting with an FTP client (FileZilla) or cPanel → File Manager.
2. Upload the contents of html/ (not the folder itself) into the web root or a sub-folder, e.g. public_html/ or public_html/admin/.
3. Open your domain in the browser. If images, CSS or JS do not load, check the folder names and upper/lower case — Linux servers are case-sensitive.

React Edition

Built with React 19, Vite, React Router 7 and Bootstrap 5.3. All 129 pages are code-split and loaded on demand. The build output is a static site that runs on any host.

Requirements

• Node.js 20.19+ or 22.12+ — check with node -v. Download from nodejs.org.
• npm 10+ (bundled with Node.js), or pnpm / yarn.
• A code editor such as VS Code.

Installation

1. Extract the ZIP you downloaded from ThemeForest and open the react/ folder.
2. Open a terminal inside that folder (in VS Code: Terminal → New Terminal).
3. Install the dependencies (first time only, needs internet):

   npm install

4. Start the development server:

   npm run dev

5. Open http://localhost:3000. The page reloads automatically when you edit a file.

Folder Structure

react/
├── index.html                HTML shell: stylesheets, theme/RTL boot script
├── package.json              Dependencies and npm scripts
├── vite.config.js            "@/..." alias → src/, dev server on port 3000
├── vercel.json               SPA fallback for Vercel
├── CREDITS.md                Third-party licences
├── public/
│   ├── assets/css/
│   │   ├── zentic.css        Theme stylesheet (CSS variables at the top)
│   │   ├── zentic-icons.css  Lucide icon font classes (icon-*)
│   │   ├── fonts/            Lucide icon font files
│   │   └── vendor/           Bootstrap (LTR + RTL), DataTables, Grid.js, Leaflet, GLightbox CSS
│   ├── assets/img/           Logo, avatars, flags, payment badges, demo images
│   ├── _redirects            SPA fallback for Netlify
│   └── .htaccess             SPA fallback for Apache / cPanel
└── src/
    ├── main.jsx              Entry: fonts, router, <App />
    ├── App.jsx               Route tree: dashboard layout, full-screen layout, 404
    ├── routes.js             All routes: path, page title, layout, lazy-loaded page
    ├── layouts/              DashboardLayout (sidebar + topbar), FullPageLayout
    ├── pages/
    │   ├── dashboard/        Pages with sidebar + topbar (IndexPage.jsx, UsersPage.jsx…)
    │   └── fullpage/         Login, signup, errors, maintenance, coming soon, AI chat…
    ├── components/
    │   ├── PageInit.jsx      Activates a page's interactive widgets
    │   ├── PageTitle.jsx     Sets the browser tab title
    │   └── layout/           Sidebar, Topbar, Footer, BackToTop, ShellInit
    ├── data/menu.js          Sidebar menu definition
    ├── lib/zentic/
    │   ├── runtime.js        Loads libraries on demand; runs init + cleanup per route
    │   ├── core.js           Template behaviour (sidebar, topbar, modals, toasts, widgets)
    │   ├── charts.js         Chart.js chart definitions
    │   └── stores/           Demo data (localStorage) for CRM, eCommerce, HR, projects
    └── styles/app.css        Small React integration helper
                    

Pages & Routes

Each page is a component in src/pages/, registered in src/routes.js and loaded on demand. The sidebar lists every page; /all-pages shows them all in one place.

Adding a Page

1. Copy src/pages/dashboard/BlankPage.jsx to src/pages/dashboard/Reports2025Page.jsx and rename the component.
2. Register it in src/routes.js (a lazy import plus a route entry).
3. Add a sidebar entry in src/data/menu.js (see Sidebar Menu).

// src/routes.js
Reports2025Page: lazy(() => import("./pages/dashboard/Reports2025Page")),
// …
{ path: "/reports-2025", title: "Reports 2025", layout: "dashboard", Component: page.Reports2025Page },

// src/pages/dashboard/Reports2025Page.jsx
import PageInit from "@/components/PageInit";

export default function Reports2025Page() {
  return (
    <div className="zentic-page">
      <div className="page-header">
        <h1 className="page-title">Reports 2025</h1>
      </div>
      {/* your content */}
      <PageInit />
    </div>
  );
}

For a full-screen page without sidebar (for example a new auth screen), put it in src/pages/fullpage/ and use layout: "fullpage". Use <Link to="/users"> from react-router-dom for links between pages.

Sidebar Menu

The sidebar is generated from src/data/menu.js. Sections contain items; an item is either a link or a dropdown.

{
  label: "Reports",
  items: [
    { label: "Overview", icon: "chart-pie", href: "/reports" },
    { label: "AI Chat", icon: "message-circle", href: "/ai-chat",
      badge: { text: "AI", className: "ai-badge" } },
    { label: "Exports", icon: "download", children: [
      { label: "CSV", href: "/exports/csv" },
      { label: "PDF", href: "/exports/pdf" },
    ] },
  ],
}

icon is any Lucide icon name (without the icon- prefix) that exists in public/assets/css/zentic-icons.css. Sections with alwaysOpen: true start expanded; the others expand when they contain the current page.

Charts, Tables, Maps & Lightbox

Interactive widgets are plain-JavaScript libraries activated by <PageInit />. Bootstrap's JS (dropdowns, tooltips, modals) and Chart.js are always available. Heavier libraries load only on the pages that ask for them:

<PageInit libs={["datatables"]} />   // jQuery + DataTables
<PageInit libs={["gridjs"]} />       // Grid.js
<PageInit libs={["leaflet"]} />      // Leaflet maps
<PageInit libs={["glightbox"]} />    // GLightbox image viewer

Charts

Charts are defined in src/lib/zentic/charts.js and attach to a <canvas> by id. To add one, place a canvas in your page and add a block to that file:

onChartsReady(function () {
  const canvas = document.getElementById("myRevenueChart");
  if (!canvas) return;
  new Chart(canvas, { type: "bar", data: { labels: ["Q1", "Q2"], datasets: [{ data: [12, 19] }] } });
});

Charts are destroyed automatically when you navigate away.

DataTables

List tables are wired in src/lib/zentic/core.js by table id (search for wireListTable). To make a new table interactive, give it an id, call window.initDataTable("myTable") inside an onPageReady block, and add libs={["datatables"]} to the page's PageInit.

Toasts, modals and quick actions

Many buttons work through data attributes, so you can use them without writing JavaScript:

From your own client components you can also call window.showToast(type, message, icon) and window.openModal(id).

Colors, Fonts & Logo

All design tokens are CSS variables at the top of public/assets/css/zentic.css:

:root {
  --zc-primary: #5046E5;
  --zc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* … */
}
[data-theme="dark"] {
  /* dark-mode overrides */
}

1. Colors — change --zc-primary (and its -light / -dark variants) to rebrand the whole template.
2. Fonts — fonts are self-hosted with Fontsource and imported in src/main.jsx. To use a different font, install its @fontsource/… package, import it there, and update --zc-font-sans.
3. Logo — replace public/assets/img/logo.svg and the brand text in src/components/layout/Sidebar.jsx.
4. Icons — Lucide icon font, used as <i className="icon-home"></i>. Browse names at lucide.dev/icons and prefix them with icon-.

Dark Mode & RTL

• Dark / light: click the moon/sun icon in the topbar (or press Ctrl+D / Cmd+D). The choice is saved in localStorage under zenticTheme and applied before the first paint, so there is no flash.
• RTL / LTR: click the direction button in the topbar. Zentic swaps the LTR build of Bootstrap for its RTL build and sets dir="rtl" on <html>; the choice is saved under zenticDirection.
• Make RTL the default: set dir="rtl" in index.html and change 'ltr' to 'rtl' in the boot script there.

Demo Data

CRM, eCommerce, HR and project dashboards read demo records from small stores in src/lib/zentic/stores/, seeded into the browser's localStorage. Replace them with calls to your API when you connect a backend. Clear the site data in your browser to reset the demo.

Build & Deploy

1. Create the production build:

   npm run build

2. Optional — test it locally with npm run preview.
3. Upload the contents of the generated dist/ folder to your host (Vercel, Netlify, S3, cPanel, GitHub Pages…).

Deploy to the root of a domain or subdomain (for example admin.example.com). Asset paths start with /assets/, so hosting inside a sub-folder needs those paths and Vite's base option changed.

Maps in production: the Leaflet demo uses public tile servers (OpenStreetMap, OpenTopoMap, Esri). For a live product, use your own or a commercial tile provider and keep the attribution visible.

FAQ & Troubleshooting

Why are some widgets plain JavaScript instead of React components?

Zentic keeps one proven code path for its widgets (Chart.js, DataTables, Leaflet…) shared with the HTML edition. The runtime starts that code when a page mounts and fully cleans it up when you leave, so navigation stays fast and leak-free. You are free to replace any widget with a React library of your choice.

Why is React Strict Mode off?

Strict Mode mounts components twice in development, which would initialise the plain-JS widgets twice. It does not affect production. You can wrap your own React-only components in <StrictMode>; see the note in src/main.jsx.

Do I need jQuery?

Only the DataTables pages load jQuery, and only on those pages. If you remove DataTables you can uninstall jquery and datatables.net-bs5.

Can I use TypeScript?

Yes. Vite supports TypeScript out of the box: add a tsconfig.json, install typescript, and rename files to .tsx as you go.

"npm install" fails or the wrong Node version is used

Run node -v and compare it with the requirements above. Upgrade Node.js, delete the node_modules folder if it exists, and run npm install again.

"Port 3000 is already in use"

Close the other app using port 3000, or start on another port. For React use npm run dev -- --port 3001.

Next.js Edition

Built with Next.js (App Router), React 19 and Bootstrap 5.3. All 129 pages are separate routes. Deploy as a Node.js app (Vercel) or export to plain static HTML.

Requirements

• Node.js 20.9 or newer — check with node -v. Download from nodejs.org.
• npm 10+ (bundled with Node.js), or pnpm / yarn.
• A code editor such as VS Code.

Installation

1. Extract the ZIP you downloaded from ThemeForest and open the nextjs/ folder.
2. Open a terminal inside that folder (in VS Code: Terminal → New Terminal).
3. Install the dependencies (first time only, needs internet):

   npm install

4. Start the development server:

   npm run dev

5. Open http://localhost:3000. The page reloads automatically when you edit a file.

Folder Structure

nextjs/
├── package.json              Dependencies and npm scripts
├── next.config.mjs           Next.js settings (static export switch inside)
├── eslint.config.mjs
├── jsconfig.json             "@/..." import alias → src/
├── CREDITS.md                Third-party licences
├── public/assets/
│   ├── css/
│   │   ├── zentic.css        Theme stylesheet (CSS variables at the top)
│   │   ├── zentic-icons.css  Lucide icon font classes (icon-*)
│   │   ├── fonts/            Lucide icon font files
│   │   └── vendor/           Bootstrap (LTR + RTL), DataTables, Grid.js, Leaflet, GLightbox CSS
│   └── img/                  Logo, avatars, flags, payment badges, demo images
└── src/
    ├── app/
    │   ├── layout.jsx        Root layout: stylesheets, metadata, theme/RTL boot script
    │   ├── not-found.jsx     404 page for unknown URLs
    │   ├── (dashboard)/      Pages with sidebar + topbar
    │   │   ├── layout.jsx
    │   │   ├── page.jsx      /  (Main Dashboard)
    │   │   └── <route>/page.jsx
    │   └── (fullpage)/       Login, signup, errors, maintenance, coming soon, AI chat…
    ├── components/
    │   ├── PageInit.jsx      Activates a page's interactive widgets
    │   └── layout/           Sidebar, Topbar, Footer, BackToTop, ShellInit
    ├── data/menu.js          Sidebar menu definition
    ├── lib/zentic/
    │   ├── runtime.js        Loads libraries on demand; runs init + cleanup per route
    │   ├── core.js           Template behaviour (sidebar, topbar, modals, toasts, widgets)
    │   ├── charts.js         Chart.js chart definitions
    │   └── stores/           Demo data (localStorage) for CRM, eCommerce, HR, projects
    └── styles/nextjs.css     Small Next.js integration helper
                    

Pages & Routes

Each page is a React Server Component in its own folder. The sidebar lists every page; /all-pages shows them all in one place.

Adding a Page

1. Copy src/app/(dashboard)/blank/ to a new folder, e.g. src/app/(dashboard)/reports-2025/.
2. In page.jsx, rename the component and set metadata.title.
3. Add a sidebar entry in src/data/menu.js (see Sidebar Menu).

import PageInit from "@/components/PageInit";

export const metadata = { title: "Reports 2025" };

export default function Reports2025Page() {
  return (
    <div className="zentic-page">
      <div className="page-header">
        <h1 className="page-title">Reports 2025</h1>
      </div>
      {/* your content */}
      <PageInit />
    </div>
  );
}

For a full-screen page without sidebar (for example a new auth screen), create it under src/app/(fullpage)/ instead.

Sidebar Menu

The sidebar is generated from src/data/menu.js. Sections contain items; an item is either a link or a dropdown.

{
  label: "Reports",
  items: [
    { label: "Overview", icon: "chart-pie", href: "/reports" },
    { label: "AI Chat", icon: "message-circle", href: "/ai-chat",
      badge: { text: "AI", className: "ai-badge" } },
    { label: "Exports", icon: "download", children: [
      { label: "CSV", href: "/exports/csv" },
      { label: "PDF", href: "/exports/pdf" },
    ] },
  ],
}

icon is any Lucide icon name (without the icon- prefix) that exists in public/assets/css/zentic-icons.css. Sections with alwaysOpen: true start expanded; the others expand when they contain the current page.

Charts, Tables, Maps & Lightbox

Interactive widgets are plain-JavaScript libraries activated by <PageInit />. Bootstrap's JS (dropdowns, tooltips, modals) and Chart.js are always available. Heavier libraries load only on the pages that ask for them:

<PageInit libs={["datatables"]} />   // jQuery + DataTables
<PageInit libs={["gridjs"]} />       // Grid.js
<PageInit libs={["leaflet"]} />      // Leaflet maps
<PageInit libs={["glightbox"]} />    // GLightbox image viewer

Charts

Charts are defined in src/lib/zentic/charts.js and attach to a <canvas> by id. To add one, place a canvas in your page and add a block to that file:

onChartsReady(function () {
  const canvas = document.getElementById("myRevenueChart");
  if (!canvas) return;
  new Chart(canvas, { type: "bar", data: { labels: ["Q1", "Q2"], datasets: [{ data: [12, 19] }] } });
});

Charts are destroyed automatically when you navigate away.

DataTables

List tables are wired in src/lib/zentic/core.js by table id (search for wireListTable). To make a new table interactive, give it an id, call window.initDataTable("myTable") inside an onPageReady block, and add libs={["datatables"]} to the page's PageInit.

Toasts, modals and quick actions

Many buttons work through data attributes, so you can use them without writing JavaScript:

From your own client components you can also call window.showToast(type, message, icon) and window.openModal(id).

Colors, Fonts & Logo

All design tokens are CSS variables at the top of public/assets/css/zentic.css:

:root {
  --zc-primary: #5046E5;
  --zc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* … */
}
[data-theme="dark"] {
  /* dark-mode overrides */
}

1. Colors — change --zc-primary (and its -light / -dark variants) to rebrand the whole template.
2. Fonts — fonts are self-hosted with Fontsource and imported in src/app/layout.jsx. To use a different font, install its @fontsource/… package, import it there, and update --zc-font-sans.
3. Logo — replace public/assets/img/logo.svg and the brand text in src/components/layout/Sidebar.jsx.
4. Icons — Lucide icon font, used as <i className="icon-home"></i>. Browse names at lucide.dev/icons and prefix them with icon-.

Dark Mode & RTL

• Dark / light: click the moon/sun icon in the topbar (or press Ctrl+D / Cmd+D). The choice is saved in localStorage under zenticTheme and applied before the first paint, so there is no flash.
• RTL / LTR: click the direction button in the topbar. Zentic swaps the LTR build of Bootstrap for its RTL build and sets dir="rtl" on <html>; the choice is saved under zenticDirection.
• Make RTL the default: set dir="rtl" in src/app/layout.jsx and change 'ltr' to 'rtl' in the boot script there.

Demo Data

CRM, eCommerce, HR and project dashboards read demo records from small stores in src/lib/zentic/stores/, seeded into the browser's localStorage. Replace them with calls to your API when you connect a backend. Clear the site data in your browser to reset the demo.

Build & Deploy

Option A — Vercel / any Node.js host

npm run build
npm run start   # serves on port 3000 (set PORT to change)

On Vercel, import the nextjs/ folder as a project; Next.js is detected automatically.

Option B — Static hosting (Netlify, S3, cPanel, GitHub Pages…)

1. In next.config.mjs uncomment:

   output: "export",
   images: { unoptimized: true },

2. On servers that do not map /users to users.html automatically (Apache, cPanel, plain S3), also uncomment trailingSlash: true so each page is written as users/index.html.
3. Run npm run build.
4. Upload the contents of the generated out/ folder to your host.

Maps in production: the Leaflet demo uses public tile servers (OpenStreetMap, OpenTopoMap, Esri). For a live product, use your own or a commercial tile provider and keep the attribution visible.

FAQ & Troubleshooting

Why are some widgets plain JavaScript instead of React components?

Zentic keeps one proven code path for its widgets (Chart.js, DataTables, Leaflet…) shared with the HTML edition. The runtime starts that code when a page mounts and fully cleans it up when you leave, so navigation stays fast and leak-free. You are free to replace any widget with a React library of your choice.

Why is React Strict Mode off?

Strict Mode mounts components twice in development, which would initialise the plain-JS widgets twice. It does not affect production. You can turn it back on in next.config.mjs for your own React-only pages.

Do I need jQuery?

Only the DataTables pages load jQuery, and only on those pages. If you remove DataTables you can uninstall jquery and datatables.net-bs5.

Can I use TypeScript?

Yes. Rename files to .tsx and run npm run dev; Next.js creates tsconfig.json for you.

"npm install" fails or the wrong Node version is used

Run node -v and compare it with the requirements above. Upgrade Node.js, delete the node_modules folder if it exists, and run npm install again.

"Port 3000 is already in use"

Close the other app using port 3000, or start on another port. For Next.js use npm run dev -- -p 3001.

Licensing

Zentic is sold on ThemeForest under the Envato Market licence you purchased. Your licence applies to all three editions (HTML, React and Next.js) in this package.

• Regular License — use Zentic in one end product where end users are not charged for access.
• Extended License — use Zentic in one end product where end users can be charged (for example a paid SaaS).
• You need a separate licence for each project. A new end product needs a new purchase.
• You may not redistribute or resell Zentic itself, alone or bundled in a template or theme pack, free or paid.

The complete terms are at themeforest.net/licenses/standard. If this summary and the official licence differ, the official licence wins.

Third-party libraries, fonts and icons keep their own open-source licences (MIT, BSD-2-Clause, ISC, SIL OFL) — see Sources & Credits, LICENSING.txt, and CREDITS.md inside react/ and nextjs/.

Sources & Credits

Zentic is built with a minimal dependency footprint. We thank the creators of the open-source resources listed below. All assets are used under their respective licenses.

JavaScript & CSS Libraries

Zentic bundles all vendor libraries locally — no CDN, no external requests required.

All custom interactions are handled by a small set of hand-written files:

Fonts

Icons

Images

Change Log

1. Version 1.1.0 — 12 October 2026
   • New: React Edition Added.
   • New: Nextjs Edition Added.
2. Version 1.0.0 — 25 July 2026
   • Initial release (HTML edition).

Support

Thank you for choosing Zentic! We hope this documentation helps you set up and customize the template quickly and with confidence.

If you run into anything not covered here, our support team is ready to help.

Submit a support ticket and we will respond within 24–48 hours (usually sooner).
Support hours: Monday – Friday, 10:00 AM – 7:00 PM IST.

Before submitting a ticket, please:

• Read through this documentation fully.
• Verify file paths if assets (images, CSS, JS) are not loading after upload.

We are committed to making your experience great. Thank you again for your purchase!