DreamsPOS - POS & Inventory Management Admin Dashboard Template - Admin Templates Site Templates Live Preview A point of sale admin template can help organize and track inventory in a business. The template includes fields for items, quantities, prices, and descriptions. It also includes fields for customer information, such as name and address. This information can help the business keep track of its inventory and meet customers’ needs.
DreamsPOS offers powerful admin template and modern interface.
Built-in Applications
- Calendar
- Chat
- To Do
- Notes
- File Manager
- Social Feed
- Kanban
- Invoices
- Call
Layout Features
- Creative Design
- Fully Responsive
- Color & Fonts is easily changed
- W3C Validated Code
- Build with Bootstrap v5.x used
- Compatible Browsers: IE8+, Firefox, Safari, Opera, Chrome
- Dark, Light with RTL Supported
- Various Sidebar Colours
- Json data implemented in tables
- Multiple Layouts
Project Overview
The project follows a modular structure with clear separation of concerns.
dreamspos/ │ ├── html/ │ │ │ ├── template/ │ │ │ │ │ ├── index.html │ │ │ │ │ ├── assets/ │ │ │ ├── css/ │ │ │ ├── fonts/ │ │ │ ├── img/ │ │ │ ├── js/ │ │ │ └── plugins/ │ │ │ └── scss/ │ │ │ ├── template-rtl/ │ │ │ │ │ ├── index.html │ │ │ │ │ ├── assets/ │ │ │ ├── css/ │ │ │ ├── fonts/ │ │ │ ├── img/ │ │ │ ├── js/ │ │ │ └── plugins/ │ │ │ └── scss/
Structure Overview
DreamsPOS is powered by the robust Bootstrap Framework, the most trusted admin toolkit for developing responsive and mobile-first websites.
The following partial files have been added to the project: title-meta, header, footer and script.
Below is sample coding structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>DreamsPos - Bootstrap Admin HTML Template</title>
<link rel="shortcut icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="main-wrapper">
<div class="header">
</div>
<div class="sidebar">
</div>
<div class="content container-fluid">
</div>
</div>
</div>
<script src="assets/js/jquery-4.0.0.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/plugins/select2/js/select2.min.js"></script>
<script src="assets/js/theme-script.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Script Overview
The DreamsPOS template includes a wide range of useful JavaScript plugins designed to enhance the user experience on your website. These plugins power features like menu sliders, booking, date & time pickers, and more.
You can find all the JS files organized in the js/ and
plugins/ directories.
<script src="assets/js/script.js"></script>
Prerequisites
Node.js Installation
Before installing Sass, ensure you have Node.js installed on your system:
https://nodejs.org/en/download/
Install Sass
If you use Node.js, you can also install Sass using npm by running
npm install -g sasssass --watch main.scss:../css/style.cssInstallation Steps
Unzip Template Files
After downloading, extract the DreamsPOS package. Inside, you will find the folder HTML (Source Code), which contains all necessary files.
Copy Files to Server
Open the HTML folder, then copy all files and paste them into your localhost directory (e.g., htdocs for XAMPP, www for WAMP) or directly into your web server’s root folder.
Run in Browser
Once the files are in place, you can open the template in any modern web browser (Chrome, Firefox, Safari, Edge) from your PC or laptop. Simply navigate to localhost/dreamspos/index.html or www.example.com/index.html or the domain where you uploaded the template.
The default font is Inter. To change the font:
Update the @import URL and the
--font-family-primary variable in style.css:
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
body {
$font-family-primary: 'Nunito', sans-serif;
}
The design token variables are defined in the @theme block of
your CSS file. Here are the primary color tokens:
Background Color Change
You can change the header background color in style.css as per your wish
.header {
background: #fff;
left: 0;
position: fixed;
right: 0;
top: 0;
height: 60px;
}
How it Works
Dark mode is controlled by a theme attribute/class on the root element. When activated, all design tokens are overridden to dark variants.
The theme is controlled by the data-theme attribute on the <html> element:
<html lang="en" data-theme="dark">Dark mode styles are defined in the [data-theme=dark] block in style.css:
[data-theme=dark] {
$darkmode-light: #D6DADE;
$darkmode-dark: #131313;
$darkmode-white: #0D0D0D;
}To enable Right-to-Left (RTL) layout, add the dir="rtl"
attribute to the <html> tag:
<html lang="en" dir="rtl">Tailwind CSS handles RTL layout transformations automatically when the
dir attribute is set. All margin, padding, and positioning
utilities adapt to the RTL direction.
RTL Demo
An RTL demo page is available at rtl.html in
the HTML version for reference.
Use Font Awesome icons with spesific class
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
</head>
</html>
<i class="fa-regular fa-bell">
<i class="fa-regular fa-comment">
<i class="fa-solid fa-paper-plane">
<div class="table-responsive">
<table class="table border-0 table-center mb-0 datatable">
<thead>
<tr>
<th>
<div class="form-check check-tables">
<input class="form-check-input" type="checkbox" value="something">
</div>
</th>
<th>ID</th>
<th>Name</th>
<th>Class</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check check-tables">
<input class="form-check-input" type="checkbox" value="something">
</div>
</td>
<td>10</td>
<td>Mathematics</td>
<td>A</td>
<td>097 3584 5870</td>
</tr>
</tbody>
</table>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/css/dataTables.bootstrap5.min.css>
<title>DreamsPOS Admin Template</title>
</head>
<body>
<div class="main-wrapper">
</div>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/dataTables.bootstrap5.min.js"></script>
</body>
</html>
The default layout features a full vertical sidebar on the left, a horizontal topbar at the top, and the main content area. This is the standard layout used across all dashboard pages.
- Full-width sidebar with navigation menu, logo, and user profile
- Top header with search, notifications, and user actions
- Responsive - sidebar collapses to overlay on mobile devices
The mini sidebar layout collapses the sidebar to show only icons, providing more space for the main content area. Users can toggle between expanded and collapsed states using the sidebar toggle button.
- Collapsed sidebar showing only menu icons
- Hover to expand and reveal full menu text
- Toggle via the hamburger button in the topbar
DreamsPOS 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.
| NAME | URL |
|---|---|
| Bootstrap | https://getbootstrap.com/docs/ |
| jQuery | https://jquery.com/ |
| Fontawesome | https://fontawesome.com/ |
| Select2 | https://github.com/select2/select2 |
| Date Timepicker | https://cdnjs.com/libraries/jquery-datetimepicker |
| Google Fonts | https://fonts.google.com/ |
| Fancy Box | http://fancybox.net/ |
| Full Calendar | https://fullcalendar.io/ |
| Moment JS | https://momentjs.com/ |
| Datatables | https://datatables.net/download |
Need Support?
If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com
Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.
Contact SupportImportant Note : We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.
Do you need a customized application for your business?
If you need a customized application for your business depends on your specific requirements and goals, Please contact us. Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.
Don't Miss Out on the Benefits of Customization!
Unlock the potential of your project. It's time to ensure your project isn't another cookie-cutter solution but truly unique and effective one.
Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!
We'll tailor the application to meet your specific needs and preferences.
We will upload your website to the server and ensure it is live.
Thank You
Thank you once again for downloading DreamsPOS.
We hope you're enjoying your experience, and we kindly request that you take a
moment to share your valuable review and rating with us.