Folder Structure

An overview of the project directory layout and what each part is responsible for.

Project Tree

apex-dashboard-html/
├── index.html                  # Dashboard page (MPA entry)
├── orders.html                 # One *.html file per route, at the root
├── products.html               # … customers, users, invoices, settings,
├── analytics.html              #    profile, pricing, support, kanban, etc.
├── docs.html                   # These documentation pages
├── auth/                       # login, register, forgot/reset password, …
├── 404.html  403.html  500.html
├── vite.config.js              # Registers every page (build.rollupOptions.input)
├── package.json                # Scripts (dev/build/preview) + dependencies
├── src/
│   ├── main.js                 # App entry: registers components, inits
│   │                           #   theme / tabs / forms / dialogs / segments
│   ├── docs.js                 # Docs entry (lighter — no charts/data-table)
│   ├── styles/
│   │   └── main.css            # Tailwind import + OKLCh tokens + .apex-* classes
│   ├── components/             # Light-DOM web components (one per widget)
│   │   ├── apex-sidebar.js         <apex-sidebar active="/orders">
│   │   ├── apex-header.js          <apex-header>
│   │   ├── apex-stats-cards.js     <apex-stats-cards>
│   │   ├── apex-revenue-chart.js   <apex-revenue-chart>
│   │   ├── apex-side-panel.js      <apex-side-panel>
│   │   ├── apex-orders-table.js    <apex-orders-table>
│   │   ├── apex-activity-feed.js   <apex-activity-feed>
│   │   ├── apex-chart.js           <apex-chart>  (generic ApexCharts wrapper)
│   │   ├── apex-data-table.js      <apex-data-table>  (JSON-configured table)
│   │   ├── apex-docs-header.js     <apex-docs-header>
│   │   └── apex-docs-sidebar.js    <apex-docs-sidebar active="docs.html">
│   └── lib/
│       ├── theme.js            # dark/light/system, localStorage, no-flash
│       ├── icons.js            # curated Lucide set + renderIcons()
│       ├── data.js             # mock data (swap for your API/server data)
│       ├── charts.js           # ApexCharts color/theme helpers
│       ├── tabs.js             # tab switching
│       └── toast.js            # toast notifications
└── blade-starter-kit/          # Laravel Blade integration (see its README)

Key Directories

*.html (project root)

Each route is a standalone HTML file at the project root — index.html is the dashboard, and there is one file per page (orders, products, settings, the auth screens under auth/, error pages, and so on). Every page links a tiny no-flash theme script in its <head>, drops in the shared <apex-sidebar> and <apex-header> chrome, and loads the app entry with <script type="module" src="/src/main.js">.

vite.config.js

The single source of truth for which pages exist. Because this is a multi-page app, every *.html file must be listed under build.rollupOptions.input so Vite emits it as a standalone page in the build. To add a route, create the HTML file and add one line here.

src/main.js & src/docs.js

The two entry points. main.js imports the stylesheet, registers the dashboard web components, and initializes theme, tabs, segmented controls, demo-form validation, and native dialogs. docs.js is a lighter entry for the documentation pages — it skips the charts and data-table and instead registers the docs header/sidebar and adds the copy button to each code block.

src/styles/main.css

The single stylesheet. It imports Tailwind CSS v4, defines the OKLCh design tokens for both :root (light) and .dark, and declares the reusable component classes such as .apex-card, .apex-btn, and .apex-input.

src/components/

One light-DOM web component per widget, each defined as an apex-* custom element you use as an HTML tag. Because they render in light DOM (no Shadow DOM), Tailwind utilities and global CSS apply normally and the markup is copy-pasteable into any template language. Components render their own Lucide icons and ApexCharts instances on mount, and re-theme automatically when the color scheme changes. Importing a component file in an entry is what registers (and tree-shakes) it.

src/lib/

Shared helpers used across components and pages:

  • theme.js — manages dark/light/system, persists to localStorage, and pairs with the no-flash inline head script
  • icons.js — the curated Lucide icon set plus renderIcons(), which replaces every data-lucide attribute with its SVG
  • data.js — mock data for the widgets; swap this for your own API or server data
  • charts.js — ApexCharts color/theme helpers that resolve chart colors from the CSS tokens
  • tabs.js — generic tab switching
  • toast.js — lightweight toast notifications

blade-starter-kit/

A standalone Laravel Blade integration that wires the components through Laravel’s built-in Vite pipeline. It demonstrates both server-rendered-partial and drop-in-component patterns. See its own README for details.

Adding a Page

Pages are plain HTML, so adding one is two steps: copy an existing page’s <head> and shell, then register the file in vite.config.js.

  1. Create your-page.html at the root, change the <main> content and the active attribute on <apex-sidebar>.
  2. Add it to the input map in vite.config.js.
input: {
  main: resolve(import.meta.dirname, "index.html"),
  yourPage: resolve(import.meta.dirname, "your-page.html"),
}

The shared chrome (<apex-sidebar>, <apex-header>) is defined once and reused, so there is no copy-pasted navigation markup to keep in sync.

Next Steps

Head back to the Installation guide if you have not run the project yet, or return to the Introduction for the feature overview.

Installation