Documentation

Dashora HTML Admin Dashboard Template

Dashora is a static, responsive admin dashboard template built with HTML5, Bootstrap 5, vanilla JavaScript, Chart.js, and local vendor assets. No backend, npm install, or build process is required.

61Total HTML files

23Component pages

5Layout modes

RTLBuilt-in direction support

Quick Start

Open any HTML file directly in a browser, or serve the folder from a local server if your integration workflow needs one.

Dashora/
open index.html

# optional local server
python3 -m http.server 8080
# then visit http://localhost:8080

No build step required. All CSS, JavaScript, fonts, icons, charts, and calendar assets are included locally inside the template folder.

Folder Structure

Dashora/
├── index.html
├── analytics.html
├── ecommerce.html
├── crm.html
├── dashboard-crypto.html
├── dashboard-projects.html
├── dashboard-job.html
├── file-manager.html
├── kanban.html
├── component-*.html
├── assets/
│   ├── css/style.css
│   ├── js/main.js
│   ├── img/favicon.svg
│   ├── img/team/team-1.jpg ... team-6.jpg
│   └── vendor/
│       ├── bootstrap/
│       ├── bootstrap-icons/
│       ├── chart/
│       └── fullcalendar/
├── docs/index.html
├── documentation.html
└── landing.html

Root HTML files are complete demo pages. Shared styling lives in assets/css/style.css. Shared behavior lives in assets/js/main.js.

Pages Included

Category	Pages	Notes
Dashboards	Default, Analytics, eCommerce, CRM, Crypto, Projects, Job	Charts, KPIs, tables, activity feeds, and app-specific widgets.
Apps	Projects, Tasks, Kanban, File Manager, Calendar, Chat, Inbox, Comments	Interactive UI patterns for common SaaS workflows.
Commerce	Customers, Customer Details, Products, Orders, Invoice List, Invoice Details	Customer, order, invoice, and catalog screens.
Components	Accordion, Alerts, Badge, Breadcrumb, Buttons, Typography, Button Group, Card, Collapse, Carousel, Dropdowns, Modal, Navbar, List Group, Tabs, Offcanvas, Pagination, Popovers, Progress, Scrollspy, Spinners, Toasts, Tooltips	Each component has its own HTML page with multiple examples.
Pages	Pricing, Profile, Settings, Team, Notifications, Reports, FAQ, Layouts	Reusable business and account pages.
Auth & Utility	Login, Register, Forgot Password, 404, Coming Soon	Standalone utility pages with matching branding.
Marketing & Docs	Landing, Documentation, Docs Index	Landing page, root docs, and nested docs file.

Components

Component pages live as individual files, which makes them easy to copy into projects or link from a UI kit menu.

23 separate component pagesEvery Bootstrap component page is split into its own HTML file.

Richer examplesPages include multiple variants such as two-column accordions, styled cards, badges, tabs, alerts, and more.

Responsive demosComponent layouts collapse cleanly on phone and tablet screens.

Dashora stylingComponents follow the same lighter, sharper visual language as the dashboard pages.

Layouts

Dashora includes Default, Horizontal, Detached, Two Column, and Hovered layouts. Layout choice is stored in localStorage, so it remains active while navigating pages.

Use the topbar Layout dropdown to switch layouts.
Use the sidebar layout switcher for the same controls.
Horizontal layout shows grouped dropdown navigation across the top.
Hovered layout keeps the sidebar compact until the sidebar is hovered.
Mobile always uses the hamburger sidebar flow for consistent navigation.

Browser Features

Feature	How it works	File
Dark mode	Toggles `data-theme="dark"` and stores the setting.	`assets/js/main.js`, `assets/css/style.css`
RTL mode	Toggles the document `dir` attribute and adjusts menu placement.	`assets/js/main.js`, RTL CSS selectors
Command search	`CTRL + K` or `CMD + K` opens a searchable command modal.	HTML modal markup and `main.js`
Mobile sidebar	Hamburger opens the sidebar above the topbar with a backdrop.	`main.js`, responsive CSS
Charts	Chart.js initializes line, bar, and doughnut charts from `data-chart`.	`assets/js/main.js`
Calendar	FullCalendar runs from a local vendor file, with fallback calendar rendering.	`calendar.html`, `main.js`

Customization

Colors and Theme Tokens

Most visual decisions are controlled with CSS variables near the top of assets/css/style.css.

:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --text: #15171c;
  --muted: #707783;
  --line: #dfe5ef;
  --primary: #5278ff;
  --primary-2: #2fb6d0;
}

Navigation

Sidebar, horizontal navigation, and command search links are static HTML in each page. The helper script scripts/add-app-pages.js was used to keep repeated Apps navigation consistent after adding Kanban and File Manager.

Spacing

Dashboard rows use Bootstrap .row.g-4. The visible vertical row gap is controlled by the gutter, so row and column spacing stay consistent.

Charts

Add a canvas with a supported data-chart value. The current supported values are line-style default charts, traffic doughnut charts, and sales-bars bar charts.

<canvas class="chart-md" data-chart="sales-bars"></canvas>
<canvas class="chart-md" data-chart="traffic"></canvas>

To change chart colors, labels, or datasets, edit the Chart.js initialization block in assets/js/main.js.

Forms & Modals

Dashora uses static forms and Bootstrap modals. Buttons with data-create-open open the shared Create modal and load fields based on the data-create-type.

<button class="btn btn-primary"
  data-create-open
  data-create-type="tasks"
  data-create-label="Create Task">
  Create Task
</button>

Edit the fieldSets object in assets/js/main.js to add or change modal fields.

Assets

Favicon: assets/img/favicon.svg
Team images: assets/img/team/team-1.jpg through team-6.jpg
Bootstrap CSS/JS: assets/vendor/bootstrap/
Bootstrap Icons: assets/vendor/bootstrap-icons/
Chart.js: assets/vendor/chart/chart.umd.min.js
FullCalendar: assets/vendor/fullcalendar/index.global.min.js

Validation & Browser Checks

During template updates, representative pages were checked with local HTML validation and browser screenshots. Before shipping your customized version, validate any page you edit.

tidy -quiet -errors index.html analytics.html file-manager.html kanban.html
node --check assets/js/main.js

Static template note. Some buttons intentionally show static demo toasts. Connect those actions to your backend or frontend framework in production.

Dependencies

Dependency	Purpose	Location
Bootstrap 5	Grid, utilities, dropdowns, modals, offcanvas, forms, and base components.	`assets/vendor/bootstrap/`
Bootstrap Icons	Dashboard, app, action, status, and component icons.	`assets/vendor/bootstrap-icons/`
Chart.js	Dashboard charts and visual analytics widgets.	`assets/vendor/chart/chart.umd.min.js`
FullCalendar	Interactive calendar page.	`assets/vendor/fullcalendar/index.global.min.js`

Support Notes

Dashora is frontend-only. It does not include backend authentication, database logic, or API endpoints.
All pages can be copied into a framework such as Laravel, React, Vue, Next.js, or plain server-rendered HTML.
Keep asset paths correct when moving files into subfolders.
For production, replace demo table rows, chart values, and static toast actions with real data.