Introduction

A modern, framework-free admin dashboard built with Tailwind CSS v4, vanilla-JS Web Components, and ApexCharts — bundled by Vite as a multi-page app. No React, Vue, or Angular. Drops into any backend or plain static hosting.

What is Apex Dashboard — HTML?

Apex Dashboard — HTML is the framework-free variant of the Apex admin template. It delivers the same design system, layout, and data as the React/Next, Laravel, Angular, and Vue builds, but ships zero UI framework. Every widget is a light-DOM custom element you drop into the page as an HTML tag, styled entirely with Tailwind utility classes. Because the markup is plain HTML and the components survive copy-paste, the template fits cleanly into any server stack — Laravel Blade, Django, Rails, .NET, WordPress — or a static host.

The whole project is a Vite multi-page app: each route is its own *.html file at the project root, registered in vite.config.js. The shared chrome (sidebar, header) is defined once as a component and reused on every page, so there is no copy-pasted navigation to keep in sync.

Features

  • Tailwind CSS v4 + vanilla Web Components — utility-first styling with OKLCh color tokens, components built on the native Custom Elements API with no runtime framework
  • Vite multi-page build — HMR in development, tree-shaking and per-page bundles in production, one entry per route
  • 5 Dashboard variations — Overview, Analytics, eCommerce, CRM, and SaaS, each with its own layout and chart composition
  • 20+ app pages — Chat, Mail, Files, Kanban, Calendar, Wizard, Forms, Orders, Products, Customers, Users, Invoices, Billing, Profile, Settings, Support, Pricing, and Notifications
  • Charts powered by ApexCharts — area, bar, donut, and sparkline charts that re-theme automatically when the color scheme changes
  • Light-DOM custom elements — usable as plain HTML tags (e.g. <apex-sidebar>, <apex-chart>); they render in light DOM so Tailwind and global CSS apply normally
  • Dark / light / system theme — persisted to localStorage, with a no-flash inline script in each page’s <head> that applies the saved theme before first paint
  • Data-driven data table — the <apex-data-table> component is configured with an inline JSON script: sortable columns, search, status tabs, pagination, row selection, CSV export, and dropdown row actions
  • Auth pages — login, register, forgot password, reset password, two-factor, verify email, and lock screen templates
  • Error & utility pages — 404, 403, 500, Coming Soon, and Maintenance
  • Curated Lucide icon set — a tree-shaken subset of Lucide icons rendered from data-lucide attributes, keeping the bundle lean
  • Native dialogs, tabs & forms — confirm modals via <dialog>, segmented controls, and demo forms with native constraint validation plus toast feedback
  • Drag-and-drop Kanban — an interactive task board powered by SortableJS
  • Laravel Blade starter kit — a blade-starter-kit/ directory wiring the components through Laravel’s Vite pipeline
  • Fully responsive — collapsible sidebar, mobile drawer, and touch-friendly interactions across every page

Quick Start

Get up and running in under a minute:

npm install
npm run dev

Then open http://localhost:3838 in your browser. Vite hot-reloads your changes as you edit.

Tech Stack

Layer Tool
BuildVite (multi-page, HMR, tree-shaking)
StylingTailwind CSS v4 via @tailwindcss/vite, OKLCh tokens
ComponentsVanilla Web Components (light DOM)
ChartsApexCharts
IconsLucide (vanilla, curated subset)
Drag & dropSortableJS
No runtime framework is shipped. The JavaScript your users download is just your components plus ApexCharts and the curated Lucide icons.

Next Steps

Ready to dive in? Continue with the Installation guide for detailed setup instructions, or explore the Folder Structure to understand the project layout.

Installation