Vexlora, from first install to production integration.

Start here

Vexlora is an admin-panel template, not a customer-facing storefront and not a production backend.

Recommended reading order

Installation

Use the compiled HTML immediately, or install the optional Tailwind build dependencies when you want to customize and rebuild the CSS.

Fresh install

# Option A — compiled package
Open index.html directly or serve the folder with any static server.

# Option B — customize Tailwind source
npm install
npm run dev

Open the included index.html. When using the optional development server, use the local URL printed by the build tool. The landing page links to the Executive dashboard.

Production verification

npm run build
# Then test the generated HTML/CSS/JS in current browsers.

Static configuration

For the HTML edition, update public endpoints and UI settings in the documented JavaScript configuration files. Never place production secrets or private API keys in browser-delivered JavaScript.

Project structure

The route layer stays thin; shared UI, business features, data adapters and configuration have separate ownership.

Customize safely

Most buyer changes have a central entry point. Start there before editing many pages.

productConfig.name = "Your Admin"
productConfig.companyName = "Your Company"
productConfig.brand.logoSrc = "/brand/your-logo.svg"

Shell & navigation

Sidebar, breadcrumbs, command discovery and much of the topbar are driven by shared registries.

Add a permanent navigation item

npm run registry:generate
npm run check:routes
npm run check:screen-registry

The 19 dashboards

Dashboards share shell/theme/responsive foundations, but their composition, charts and operating questions are deliberately different.

How the modules relate

Vexlora avoids duplicating ownership. A business domain owns why something happens; shared control planes own cross-cutting execution.

Commerce order to money and fulfillment

SaaS customer lifecycle

Outgoing obligation

AI operating layer

Replace mock data with your API

Vexlora keeps presentation independent from a production database. Pages should depend on typed providers/repositories, not hardcoded fetch logic.

Expected list shape

type PaginatedResult<T> = {
  items: T[]
  page: number
  pageSize: number
  total: number
  totalPages: number
}

eCommerce & Online Store

The eCommerce suite owns product/order/inventory/checkout/marketplace operations. Online Store is an admin-side content/navigation configurator for a buyer-owned storefront.

Mega-menu flow

Static Pages

Use the Online Store Pages workspace for About, Privacy, Terms and other storefront pages. The HTML editor supports source/preview modes, inline/featured media, SEO and publication controls. Production HTML should be sanitized according to your backend policy.

Blog / media

Blog supports categories, archives, featured images, social-link handoff and Menu Builder sources. Browser image handling is sample-oriented; replace it with your media/CDN API for production.

Payments & money movement

Payment Core is provider-neutral infrastructure. Finance remains the accounting/reconciliation owner; business domains own the document that explains why money moves.

Payment Core workspaces

Transactions, Methods, Providers, Accounts, Marketplace, Checkout, Routing, Refunds & Disputes, Payout Routing and Domain Flows.

See PAYMENT_CORE.md , PAYMENT_INFRASTRUCTURE_2026.md and ECOMMERCE_CHECKOUT_PAYMENTS.md .

AI platform

AI is a flagship operating layer with dedicated workspaces plus contextual copilots across business modules.

Contextual action model

Start with AI_FLAGSHIP.md , AI_CROSS_MODULE.md and the specialized AI engineering notes in docs/AI_*.md .

Authentication, users & RBAC

The template includes complete identity/admin presentations, but real session issuance and authorization must be integrated by the buyer.

Reference: AUTH_RBAC.md and IDENTITY_ACCESS_2026.md .

Forms, tables & charts

Vexlora centralizes interaction engines so buyers change business content without forking foundations.

Engineering references: FORMS.md , DATA_TABLE.md , CHARTS.md .

Localization & RTL

Locale definitions and formatting are centralized. Direction uses logical start/end utilities so LTR and RTL share the same components.

npm run check:i18n-rtl

Responsive, accessibility & quality

Responsive adaptation is intentionally limited to 320–1280px. Above 1280px, preserve the original desktop composition; larger widths should be spot-checked for overflow or regressions without redesigning the layout.

Viewport verification matrix

npm run check:responsive
npm run check:accessibility

Security architecture

Vexlora includes defensive browser defaults and a buyer-facing Security Center, while clearly separating frontend safeguards from production security controls.

CSP environment hooks

# Copy .env.example to .env.local, then configure only the keys you need.
# Keep the exact variable names shipped in .env.example.

This keeps the documentation accurate if the product prefix is renamed in a future release; .env.example remains authoritative.

Reference: HIGH_SECURITY.md .

Media, images & asset credits

Sample assets are isolated so buyers can replace them without rewriting page logic. Redistribution evidence must be handled carefully before marketplace submission.

Open Assets & Credits →

Add a new page or module

Use the existing route group and shared foundations; do not create a parallel admin shell.

npm run registry:generate
npm run check
npm run test:critical
npm run build

Build & deployment

Vexlora is a static HTML + Tailwind frontend. Deploy the compiled files to any standard static hosting or web server.

npm install
npm run build
# Upload or serve the compiled static files

Updates & upgrade safety

Keep buyer customization centralized and use version control so source upgrades can be merged predictably.

npm run upgrade:preflight
npm run check:upgrade-preflight-safety
npm run check

Release QA & certification

The source includes project-specific quality checks plus the Tailwind production build and browser testing guidance.

Buyer release sequence

npm install
npm run build
npm run check
npm run test:critical

# Combined project certification gate
npm run certify

Troubleshooting

Start with the exact failing command and message. If the issue only affects the compiled HTML, first verify file paths, assets and browser-console errors before changing build dependencies.

Frequently asked questions

Short answers to the questions buyers most often have when adapting a large admin template.

Engineering references included with the source

The docs/ directory contains detailed architecture notes for AI, payments, eCommerce, CRM, data layer, security, accessibility, responsive behavior, settings, reporting, industry suites and more. This buyer portal summarizes those contracts; the Markdown files provide implementation depth.