Vela — Static HTML/CSS Export

Introduction

This package is a static export of the Vela React Admin Dashboard Template, generated page-for-page from the original React source. It contains:

• 197 real .html pages — every dashboard, list, detail, form, chart, and utility page from the React version, as a standalone static file.
• One shared, purged Tailwind CSS bundle driving every page — same design tokens, same spacing, same responsive breakpoints as the React build.
• Dark & light themes, switchable at runtime and persisted to localStorage, matching the React version's toggle exactly.
• Working sidebar navigation, mobile drawer, and command palette (⌘K) on every page.
• Zero framework, zero build tooling required — open a file or point any static host at the folder and it works.

Quick start

Unzip the package. Everything under vela-html/ is ready to open as-is — there is nothing to install.

Option 1 — just open it

open vela-html/index.html

Option 2 — serve the folder (recommended)

Serving avoids browser file:// quirks (some links and fetches behave more predictably over HTTP):

python3 -m http.server 8000 --directory vela-html
# then open http://localhost:8000

Package structure

vela-html/
├─ index.html              # Analytics dashboard — also the homepage
├─ components.html         # UI Kit / components showcase
├─ dashboards/              # Ecommerce, CRM, Finance, Sales, Marketing…
├─ auth/                    # Login, register, password reset, 2FA…
├─ users/  products/  orders/  projects/  …   # List + one representative detail page each
├─ forms/  charts/  tables/  settings/  reports/  …
├─ assets/                  # Purged Tailwind CSS bundle, fonts, icons, images
└─ behavior/
   ├─ vela-static.js        # Theme toggle, sidebar, mobile drawer, command palette, dropdowns
   └─ vela-chrome.css        # Small runtime-only styles the static JS depends on

Every internal link (sidebar, breadcrumbs, "view all" buttons, row links) points at a real file in this tree — there is no client-side router and no 404 unless a link is followed outside the exported set.

What's interactive vs. static

This is a generated static export, not a hand-authored one. Two categories of the original React app's interactivity are intentionally not reproduced, because they are inherently stateful, backend-driven widgets:

• DataTable sort/filter/pagination and Kanban drag-and-drop render their default state and stay visual/static. This is standard for a marketplace HTML template — you wire these against your own data layer.
• Dropdown / Popover / Tooltip / Modal / self-contained Tabs / non-default Accordion panels used as page content (mainly the demo widgets on the Components showcase pages) are trigger-only. Their open/expanded markup is only mounted while open in React, so a static capture of the always-starts-closed page has nothing to reveal. This does not apply to the global chrome below — that's rebuilt in full, not captured mid-interaction.

Everything else is genuinely interactive, rebuilt in plain JavaScript (behavior/vela-static.js) component-for-component against the same DOM the React version produces:

• Theme toggle (dark/light, persisted to localStorage, no flash on load)
• Sidebar collapse, sidebar accordion groups, mobile drawer
• Command palette (⌘K / Ctrl+K) with live search across pages
• Topbar notification & profile dropdowns

Every other UI element — cards, badges, avatars, static forms, charts, breadcrumbs, timelines, progress bars, ratings, and so on — is plain HTML/CSS exactly as rendered by React, since none of it needs JavaScript at all.

Themes & navigation

Dark is the default on every page. Click the theme toggle (top bar, sun/moon icon) to switch — the choice is written to localStorage["vela-theme"] and read back on every subsequent page load, so it stays consistent as you navigate between static files, exactly like the React version.

The sidebar, its accordion groups, the mobile drawer (hamburger icon below the lg breakpoint), and the ⌘K command palette all work identically across all 197 pages — they're driven by the same shared behavior/vela-static.js file included on every page.

Customizing a page

There is no build step, so customization means editing HTML/CSS directly:

• Content — edit the markup in any .html file directly. Every page is a complete, self-contained document.
• Colors / accent — the design tokens (--acc, --bg-*, --t0/--t1, etc.) are CSS custom properties defined once in the shared stylesheet under assets/. Change them there and every page updates.
• Adding a page — copy the closest existing page as a starting point (same <head>, same sidebar markup, same behavior/ script tags), then edit the <main> content.
• Removing pages — delete the .html file and remove its link from the sidebar markup (search-and-replace across files, since navigation is duplicated per page rather than templated at runtime).

Deployment

The vela-html/ folder is the finished, deployable site — upload it as-is to any static host:

No server-side rendering, no rewrites, and no environment variables are required — every URL is a real file on disk.

Credits & licenses

This static build has no third-party runtime libraries at all — there is no React, no framework, and no JavaScript dependency shipped to the browser. Everything interactive is hand-written vanilla JS.

Fonts

Images & icons

• All icons and illustrations are hand-drawn inline SVG — no icon font or icon library is bundled.
• Demo product photos are hot-linked from Unsplash (free for commercial use, no attribution required). They are demo placeholders — replace them with your own imagery.

Support

If you have questions not covered here, please reach out through the item's Comments tab or the support contact listed on our ThemeForest profile. Please include your purchase code and a description of the issue.

© Vela. All rights reserved.