Dreams ERP offers 3 powerful dashboard variations and 10+ fully functional, prebuilt application modules with a clean, modular structure.
Prebuilt Applications
- Employee Directory & Attendance
- CRM Pipeline, Deals & Contacts
- Finance, Expenses & Invoices
- Inventory & Stock Management
- Calendar, Kanban Board & Tasks
- Built-in Chat & File Manager
Layout & Mode Features
- 3 Prebuilt Dashboard Variations
- Multiple Sidebar Layout Options
- Full responsive design (Mobile, Tablet, Desktop)
- Built-in Light / Dark Mode Toggle
- Full RTL Layout Direction Support
- Layout Direction Variations
Project Overview
The template is organized cleanly. Here is the structure of the project files you'll see in the main directory:
dreams-erp/ ├── dist/ - Production build output (compiled HTML, CSS, JS, and vendor libs) ├── plugins/ - Custom build-time plugins (e.g. file inclusions) ├── src/ - Source files directory │ ├── index.html - Main page (dashboard) │ ├── (other HTML) - Module pages (employees.html, inventory.html, etc.) │ ├── partials/ - Shared HTML segments (header, topbar, sidebar, footer) │ └── assets/ - Asset files directory │ ├── css/ - Global and components styling (style.css) │ ├── img/ - Images, icons, and logos │ ├── js/ - JavaScript scripts (theme script, dashboard charts, page actions) │ └── libs/ - Vendor library dependencies copied on postinstall ├── package.json - NPM packages and scripts ├── vite.config.js - Vite bundler and development configuration ├── postcss.config.js - CSS post-processing configuration └── yarn.lock - Lockfile for dependencies
Structure Overview
Dreams ERP leverages the Tailwind CSS v4 framework to deliver a scalable and mobile-first user experience. The pages use shared template partials to keep the markup clean and maintainable.
A typical HTML page imports common layouts from the src/partials/ folder: title-meta.html, header.html, topbar.html, sidebar.html, footer.html, and script.html.
Below is the standard page markup structure:
<!DOCTYPE html>
<html lang="en">
<head>
@@include('partials/title-meta.html', {"title": "Dashboard"})
@@include('partials/header.html', {"page": "index"})
</head>
<body>
<!-- Main Content Container Wrapper -->
<div class="main-wrapper">
@@include('partials/topbar.html')
@@include('partials/sidebar.html')
<!-- Page Wrapper: Contains Main Content and Footer -->
<div class="page-wrapper">
<main>
<div class="p-3 lg:py-6 lg:px-0">
<!-- Page modules content goes here -->
</div>
</main>
@@include('partials/footer.html')
</div>
</div>
@@include('partials/script.html', {"page": "index"})
</body>
</html>Script Loading Overview
Dreams ERP scripts are structured to load efficiently. Core scripts are loaded globally, while page-specific scripts are called directly when needed.
1. Core Theme Scripts
All core dynamics and theme actions are handled by the main script file, included in src/partials/script.html:
<script type="module" src="assets/js/script.js"></script>2. Direct Script Calling (Page-Specific)
For page-specific libraries, custom plugins, or charts (such as Apex Charts, ECharts, Chart JS, GLightbox, and DataTables), scripts are called directly in src/partials/script.html by specifying their paths. Examples include:
Lightbox Support
Called on lightbox pages directly. Used directly on pages requiring image popup sliders and zoom views.
<script src="assets/js/lightbox.js"></script>Apex Charts Data
Called on dashboard pages to load charts.Update all chart data, series, labels, and options inside assets/js/apex-chart-data.js.
<script src="assets/js/apex-chart-data.js"></script>ECharts Data
Called on echart pages to load charts.Update all chart data, series, labels, and options inside assets/js/echart-chart-data.js.
<script src="assets/js/echart-chart-data.js"></script>DataTables Init
Called on table pages to initialize tables.Update all table columns, options, and parameters inside assets/js/datatable.js.
<script src="assets/js/datatable.js"></script>Prerequisites
Before setting up the project, make sure you have the following environments installed on your machine:
- Node.js: Version 18.0 or higher. Download it from nodejs.org.
- Package Manager: You can use either NPM (installed with Node) or Yarn. Install Yarn globally with
npm install -g yarnif needed. - Vite: The build tool is configured locally inside the template. No global installation is needed.
Installation Steps
Extract & Open Project
Extract the downloaded Dreams ERP package file, then open the project folder in your terminal or visual code editor (e.g. VS Code).
Install Dependencies
npm install # OR yarn installThis command downloads all libraries listed in your package.json file into a newly created node_modules/ folder. It also copies required assets to the libs folder automatically.
Start Development Server
npm run dev # OR yarn run devStarts the Vite dev server. It watches for changes in any HTML, CSS, or JS file and hot-reloads the page in your browser immediately.
Open in Browser
Open your browser and visit the local address outputted in the terminal (usually http://localhost:3000).
Production Build
When you are ready to prepare files for production, run the build command to generate a minified, compiled, and optimized folder named dist/:
npm run build # OR yarn run buildDeployment
Deploy all files located inside the dist/ folder directly onto your web server. The build output includes minified scripts, compiled Tailwind CSS, and optimized layout files, ready for production use.
You can easily update the logo in two ways:
Option 1: Overwrite Logo Image Files (Recommended)
Directly replace the default SVG logo files in the src/assets/img/ directory with your own logos using the same file names:
logo.svg: Main logo (shown in light mode).logo-small.svg: Small square logo (shown when sidebar is collapsed/minimized).logo-white.svg: White text logo (shown in dark mode).
Option 2: Update HTML Templates
If you want to use different names or paths, open the template partial files: src/partials/topbar.html and src/partials/sidebar.html, and search for the logo tags to modify their src attribute:
Topbar Logo Structure (topbar.html):
<a href="index.html" class="logo">
<span class="logo-light">
<span class="logo-lg"><img src="assets/img/logo.svg" alt="logo"></span>
<span class="logo-sm"><img src="assets/img/logo-small.svg" alt="small logo"></span>
</span>
<span class="logo-dark">
<span class="logo-lg"><img src="assets/img/logo-white.svg" alt="dark logo"></span>
</span>
</a>Sidebar Logo Structure (sidebar.html):
<a href="index.html" class="logo logo-normal">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="logo-small">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>The default typography font for the template is Geist. If you want to change it to another Google font (like Inter or Roboto):
Open the style file src/assets/css/style.css and update the @import statement at the top of the file as well as the primary font variable in the @theme configuration block:
/* 1. Import the new Google Font at the very top of style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* 2. Update the variable inside the @theme block */
@theme {
--font-family-primary: "Inter", sans-serif;
}All theme colors are defined as design tokens under the @theme directive in your src/assets/css/style.css file. These variables control the look and feel of components:
@theme {
--color-primary: #0F766E; /* primary color */
--color-secondary: #2563EB; /* secondary color */
--color-success: #059669; /* success states */
--color-warning: #D97706; /* warnings */
--color-danger: #B91C1C; /* error states */
}Changing Element Colors
You can customize the color of any element by editing its class or variable assignment in the CSS file. For example, changing the header topbar background color:
.navbar-header {
@apply bg-(--topbar-bg);
}How it Works
Theme switching works by adding or toggling the data-theme="dark" attribute on the root <html> element. The template automatically stores the user's theme selection in their session storage.
1. Attribute Control
To enable dark mode, set the attribute on the root tag:
<html lang="en" data-theme="dark">2. Tailwind CSS v4 Integration
In style.css, dark mode uses a custom variant that links the Tailwind dark: modifiers directly to the HTML attribute:
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));You can write responsive layouts by simply adding prefix variants to any tag like dark:bg-dark-900 or dark:text-white.
3. Persisted Theme Javascript
The file src/assets/js/theme-script.js runs at page start to prevent screen flashing. It checks the user's session configuration:
// Loads stored choice on page load
const savedConfig = JSON.parse(sessionStorage.getItem("__THEME_CONFIG__")) || {};
const theme = savedConfig.theme || "light";
document.documentElement.setAttribute("data-theme", theme);Dreams ERP supports full Right-to-Left (RTL) reading directions. To change the layout from Left-to-Right (LTR) to RTL:
1. Update the HTML Tag
Simply add the dir="rtl" attribute and appropriate language code to your root tag:
<html lang="ar" dir="rtl">2. Tailwind RTL Processing
Tailwind CSS automatically transforms positioning utilities (like margins, padding, and flex alignments) using standard logical properties when the dir="rtl" attribute is active.
RTL Page Reference
A preconfigured RTL demo is available. You can view layout-rtl.html in your browser or source files to see a live demonstration.
Dreams ERP includes multiple popular icon packages ready for use. You can use any of the following icon libraries:
1. Lucide Icons
Use Lucide icons with the icon-[name] class prefix:
<i class="icon-house"></i>
<i class="icon-users"></i>
<i class="icon-settings"></i>2. Phosphor Icons
Use Phosphor icons with the ph-[style] ph-[name] prefix classes (e.g. bold, duotone, regular):
<i class="ph-duotone ph-plus-circle"></i>
<i class="ph-bold ph-calendar"></i>3. Font Awesome Icons
Use Font Awesome icons with standard classes:
<i class="fa-solid fa-hashtag"></i>
<i class="fa-brands fa-html5"></i>4. Tabler Icons
Use Tabler icons with the ti ti-[name] class prefix:
<i class="ti ti-menu-2"></i>The default vertical layout with a left sidebar, topbar, and center content area.
- Sidebar: Navigation menu, logo, profile details, and collapsible dropdowns.
- Topbar: Search input, user alerts, settings, and profile toggle actions.
- Responsive: Collapses into an overlay sidebar on tablets and mobile screens automatically.
A screen-saving option that collapses the sidebar to show icons only. Add class mini-sidebar to the <body> to activate.
- Icon View: Collapses to 56px to maximize the main work area.
- Hover Expand: Hovering expands the sidebar to reveal module text labels.
- Toggle: Switch between default and mini sidebar using the toggle button in the topbar.
Dreams ERP comes with 24+ pre-styled UI components. You can find these files in your src/ directory (e.g. ui-accordion.html) or click below to view their live layouts:
Dreams ERP is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.
Regular License
Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.
Extended License
For use by you or one client in a single end product for which end users may be charged.
What are the main differences between the Regular License and the Extended License?
If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.
Dreams ERP is built upon several open-source libraries, frameworks, and typography assets. We appreciate the contribution of the following resources:
| Asset Name | Official Website URL |
|---|---|
| Tailwind CSS | https://tailwindcss.com/ |
| Vite JS | https://vite.dev/ |
| Lucide Icons | https://lucide.dev/ |
| Tabler Icons | https://tabler.io/icons |
| Font Awesome | https://fontawesome.com/ |
| Phosphor Icons | https://phosphoricons.com/ |
If you have any questions or run into issues with the template, feel free to contact us via email at support@dreamstechnologies.com.
Response Time: Typically 12–24 hours on weekdays (GMT+5:30). Support covers template bugs, errors, and standard features. It does not cover custom installations or custom coding changes.
Contact SupportDo you need custom development for your application?
If you need customization, new page integration, feature setups, or database connections, our engineering team can help tailor this template to your precise specifications.
- Tailoring features to your exact branding and workflow.
- Deploying the template to your production servers.
- Integrating backend endpoints and databases.
Thank You
Thank you for choosing **Dreams ERP**! We hope this template facilitates building your application. We kindly ask you to share your feedback by leaving a rating on ThemeForest.
Leave a Review