Dashlyra - ThemeForest Documentation

Quick Start

Dashlyra is a static HTML template. You can open the HTML files directly, or use a local server for a smoother development workflow.

Install dependencies

npm install

Build compiled CSS

npm run build:css

Watch Tailwind during editing

npm run watch:css

Prepare release package

npm run build:release

Edit Tailwind source in src/styles/app.css and theme tokens in tailwind.config.js, then rebuild assets/css/tailwind.css.

File Structure

Path	Purpose
*.html	Static dashboard, auth, utility, legal, and documentation pages.
assets/css/base.css	Global tokens, Google Fonts import, base typography, and theme variables.
assets/css/components.css	Reusable UI primitives, scrollbar styling, responsive fixes, menus, and shared states.
assets/css/tailwind.css	Compiled Tailwind CSS used by all pages.
src/styles/app.css	Tailwind source file with component layers and utility composition.
assets/js/dashboard-app.js	Dashboard sidebar, nav, theme, notifications, data table, users, roles, and settings interactions.
assets/js/theme-init.js	Runs before paint to apply saved light/dark theme without flashing.
assets/js/toast.js	Reusable toast notification helper.
assets/js/onboarding-flow.js	Step navigation for the onboarding page.
tailwind.config.js	Tailwind content paths, colors, fonts, shadows, containers, and theme extensions.
scripts/create-release.js	Copies project files into `release/dashlyra-template`.
docs/	Additional product foundation and code-structure notes.
documentation/index.html	ThemeForest buyer documentation entry point.

Included Pages

Dashboard and Analytics

index.html, analytics.html, cohorts.html, funnels.html, data-table.html

Users and Access

user-management.html, roles-access.html

Billing Operations

billing.html, invoices.html, dunning.html, coupons.html

Settings and UI Kit

settings.html, form-components.html, widgets.html, empty-state.html

Authentication

login.html, register.html, forgot-password.html, reset-password.html, onboarding.html

Utility and Legal

404.html, maintenance.html, docs.html, documentation/index.html, terms.html, privacy.html

Customization Guide

Change brand colors

Edit the color tokens in tailwind.config.js and matching CSS variables in assets/css/base.css if you want the compiled utilities and custom components to share the same palette.

Change fonts

Dashlyra uses Plus Jakarta Sans for the dashboard UI and JetBrains Mono for code/API-key style content. Update the Google Fonts import in assets/css/base.css and the font families in tailwind.config.js.

Change logo and name

Search for the text Dashlyra and update the logo mark, brand label, page titles, and documentation references as needed.

Add a new dashboard page

Duplicate the closest existing dashboard page, update data-dashboard-default-view, page title, sidebar active link, and main content. Keep scripts loaded at the bottom and keep theme-init.js in the head.

Dark mode

Dark mode is class-based. The theme-init.js file reads local storage and applies the dark class to html before the page paints.

Component Notes

Sidebar: supports mobile slide-in, desktop sticky layout, collapsed desktop mode, smooth submenu animation, active page state, and tooltip labels.
Header: includes mobile menu, search, theme toggle, notifications dropdown, and profile dropdown.
Tables: include static examples and JavaScript-powered search, sorting, filtering, pagination, and row actions.
Forms: include inputs, selects, textareas, validation states, switches, radios, checkboxes, and profile/security settings examples.
Feedback: toast notifications are available through window.DashlyraToast.show(message).

JavaScript Configuration

All JavaScript is written in plain JavaScript and does not require a framework. The main dashboard script uses data-* attributes as DOM hooks, so keep these attributes when editing interactive components.

<script src='./assets/js/toast.js'></script>
<script src='./assets/js/dashboard-app.js'></script>

Auth and utility pages may only need theme-init.js. The onboarding page uses assets/js/onboarding-flow.js.

Responsive Behavior

Dashlyra is designed for mobile, tablet, laptop, and desktop screens. Dashboard content uses responsive grids, mobile-safe dropdowns, horizontal scrolling for dense tables, and a mobile drawer sidebar.

Mobile: sidebar opens from the left, header controls wrap safely, and dropdowns are viewport-clamped.
Tablet: content grids reduce columns while preserving readable card widths.
Desktop: sidebar remains sticky and can be collapsed.
Large data tables use overflow-x-auto wrappers to prevent page-level overflow.

Deployment

Because this is a static template, it can be hosted on any static hosting provider after CSS is built.

Run npm install.
Run npm run build:css.
Upload the HTML files, assets/, and any needed documentation files to your hosting provider.
For ThemeForest packaging, run npm run build:release and use release/dashlyra-template.

Credits

Resource	Usage
Tailwind CSS	Utility-first CSS framework and build process.
Google Fonts	Plus Jakarta Sans and JetBrains Mono font families.
Inline SVG icons	Dashboard navigation and interface icons.

Support Policy

Included Support

Bug fixes, template setup questions, documentation clarification, and help understanding included files.

Not Included

Custom feature development, backend/API integration, third-party plugin setup, deployment service, or complete redesign work.

Before requesting support, please include your purchase code, browser/device details, a short description of the issue, and steps to reproduce it.

Tailwind SaaS Admin Dashboard Template Documentation