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 — but it goes well beyond the shared chrome (sidebar, mobile drawer, command palette, topbar dropdowns). Every page-level control backed by bounded local React state has been rebuilt in plain JavaScript (behavior/vela-static.js) against the exact same markup the React version produces:

• Tabs, toggles, view switches & steppers — the Analytics dashboard's chart-period tabs, Pricing's monthly/yearly toggle, every Settings/Account Switch, the Theme tab's mode & accent pickers, the FAQ accordion, the Multi-Step Wizard's Prev/Next flow, the CRM board/list switch, the Calendar Month/Week/Day switch, the Date Pickers page's day grid and quick-range chips, the RTL/Dark/Light preview, and the UI Playground's live sliders/swatches.
• Filter tabs, category/status selects, free-text search, and — where the React page itself paginates — real client-side pagination — Orders Overview, Data Tables, Help Desk, Support Tickets, Filter Tables, Product Catalog, Reviews, Contacts, Notes, File Manager, Customers, Task Manager, and the Email inbox (folder highlight, search, per-row star, and full per-message reading pane) all filter/search/paginate the real rendered rows with no backend.
• Toasts, inline editing & chips — every real useToast() call in the source (Editable Table's inline cell edit, Form Validation's pass/fail submit, Create/Edit Project, Permissions, Add/Edit User) fires a real toast matching Toast.tsx's exact markup and animation; the Editable Table's cells genuinely swap to an input and commit; the Select Components tag field genuinely adds/removes chips.
• Conversations & messaging — Chat, Group Chat and the Ticket Detail reply box all switch threads/channels and let you type and send a real message bubble appended to the thread.

What's not reproduced, and why:

• Kanban drag-and-drop stays static — there's no drag-and-drop in the React source either (the boards are visual-only there too).
• Column sorting combined with search/filter/pagination on the same page (the Data Tables page's Sort-by-name/department, Support Tickets' Priority/Assignee sort) is not implemented — everything else on those two pages (search, status filter, pagination) works. Filtering and searching alone cover the vast majority of real usage; re-implementing a full client-side multi-column sort engine on top was judged not worth the added complexity for a template.
• Dropdown / Popover / Tooltip / Modal / self-contained Tabs / Accordion instances used as page content (the demo widgets on the Components showcase pages only) are trigger-only, for the same reason as before: 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 FAQ page's Accordion, or to the global chrome — both are rebuilt in full.
• The Task Manager's "mark done" checkbox, the File Upload page's drag-over highlight, and a couple of small cosmetic details (e.g. the Ticket Detail reply/note textarea's placeholder text, and the Email/Group Chat/Chat mobile single-pane swap below the lg breakpoint) are decorative or desktop-only — low-traffic, low-value corners left static to keep the behavior layer focused.
• Transactions' search box, type filter and pagination are decorative in the React source itself (no onChange/real slicing there either) — left decorative here too, to match.

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.