Documentation

Welcome to Dreams AI Agent

Official Documentation for Dreams AI Agent – Agent Builder Tailwind Admin Template

Item Name : Dreams AI - Premium AI Admin Dashboard Template
Highlights : 90+ pages, 8 dashboard variants, 15+ AI tools
Includes : HTML (Tailwind CSS)
Built With : Tailwind CSS v4, Preline UI
Author : Dreams Technologies
Support Email : [email protected]

Introduction

Dreams AI is a premium AI-powered admin dashboard template with 90+ pages across HTML version. It is designed for SaaS platforms, AI applications, admin panels, and workflow-based applications.

The template features 8 unique dashboard variants, 15+ AI generator tools, comprehensive authentication pages, data visualization, and a modern component library. Built with Tailwind CSS v4.

Requirement

Technologies

HTML

Tailwind

System Requirements

Node.js
Yarn
Browser: Modern browsers (Chrome, Firefox, Safari, Edge)

Features

Dreams AI offers 3 powerful dashboards and 10+ ready-to-use applications. It enables users to generate AI-powered images, videos, audio, text, and voice content with an intuitive and modern interface.

Built-in Applications

AI Chat
Calendar Management
Project Management
Notes Management
Invoice Management
File Manager
To-Do Manager
Kanban Board

Dashboard & Layout Features

Three Prebuilt Dashboard Variations
Mini Sidebar Layout
Hover Sidebar Layout
Hidden Sidebar Layout
Full-Width Layout Option
Responsive Design (Mobile & Tablet Friendly)
Light & Dark Mode Support

File Structure

Project Overview

The project follows a modular structure with clear separation of concerns.

		
   dreams-ai/
	
	│
	├── tailwind
	│	│	
	│	├── dist/		
	│	│	└── All Files (Compiled versions - Ready to use)
	│	├── src/
	│	│	│
	|	│	└── All Html Files
	│
	|	│	└── partials/
	|	|	|	└── sidebar.html
	|	|	|	└── topbar.html
	|	|	|	└── footer.html
	│	│	│
	|	│	└── assets
	|	│	│	│
	|	|	|	└── css
	|	|	|		└── style.css
	|	|	|	└── js
	|	|	|		└── All js Files.
	|	|	|	└── img
	|	|	|		└── All Images Here.
	│	│	│
	│	├── package.json	
	│	├── vite.config.js - Vite build configuration
	│	├── postcss.config.js
	│	├── plugins/
	│	│	└── vite-plugin-file-include.js

Structure

Structure Overview

Dreams AI leverages the Tailwind CSS v4 framework, utilizing its high-performance engine to deliver a scalable and mobile-first user experience

The following partial files have been added to the project: title-meta.html, header.html, topbar.html, sidebar.html, footer.html and script.html.

Below is sample coding structure:

<!DOCTYPE html>
	<html lang="en">
	<head>
	@@include('partials/title-meta.html', {"title": "Dashboard"})
	@@include('partials/header.html')
	</head>
	<body>
		<div class="main-wrapper">
		@@include('partials/topbar.html')
		@@include('partials/sidebar.html')
		<div class="flex items-center justify-between flex-wrap gap-3 mb-6">
		</div>
		<div class="content"> 
			<div class="p-6">
			</div>
		</div> 
		@@include('partials/footer.html')
	</div> 
	@@include('partials/script.html')
	</body>
</html>

Javascripts

Script Overview

The Dreams AI template includes a wide range of helpful JavaScript plugins designed to enhance user experience on your Dreams AI website. These plugins power features like appointment scheduling, image sliders, time pickers, and more.

You can find all the JS files organized in the js/ and plugins/ directories. Add your script inside the partials/script.html file.

<script src="assets/js/script.js"></script>

Installation

Prerequisites

Node.js Installation

Ensure that Node.js is installed and running on your system.

Download Node.js:
https://nodejs.org/en/download/

Yarn

Ensure that Yarn is installed and properly configured on your system. If Yarn is already installed, you may skip this step.

npm install -g yarn

Vite

Vite is used as the build tool. It is installed automatically as a project dependency — no global installation required.

Vite:
https://vite.dev/

Installation Steps

1

Extract & Navigate

After downloading, extract the Dreams AI package and navigate to the tailwind directory.

2

Install Dependencies

yarn install

This command will install all required dependencies into the node_modules directory.

3

Start Development Server

yarn run dev

Starts the Vite development server with hot module replacement (HMR). Changes to HTML, CSS, and JavaScript files are reflected instantly in the browser.

4

Open in Browser

Open your browser at the URL shown in the terminal (typically http://localhost:3000)

Build

Run the build command to generate the production-ready output in the dist/ directory:

yarn run build

Deployment

Deploy the dist/ folder contents to your web server. The build output contains all compiled HTML pages, optimized CSS, minified JavaScript, and vendor libraries ready for production.

How to change Logo ?

You can change the logo or replace it from img folder or you can edit it from HTML file.

<div class="header">
	<a href="index.html" class="logo">
		<img src="assets/img/logo.svg" alt="logo">
	<a>
</div>

Fonts

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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

// Font Family
--font-family-primary: "Inter", sans-serif;

Color System

The design token variables are defined in the @theme block of your CSS file. Here are the primary color tokens:

--color-primary: #7A13F0;
--color-success: #009966;
--color-info: #155DFC;
--color-warning: #E88C30;
--color-danger: #E5252A;

Background Color Change

You can change the header background color in style.css as per your wish

.navbar-header { 
	@apply bg-(--topbar-bg)
}

Dark Mode

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] {
	--color-dark: #E6E6E6;
	--color-light: #131214;
	--color-white: #090212;
}

RTL Support

To enable Right-to-Left (RTL) layout, add the dir="rtl" attribute to the <html> tag:

<html lang="ar" 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.

Icons

Use Lucide icons with spesific class

<i class="icon icon-house"></i>
<i class="icon-chart-area"></i>
<i class="icon-arrow-down-to-line"></i>

Layout Options

Dreams AI offers multiple layout options to suit different application needs. Each layout can be combined with light or dark mode.

Default Layout

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

Mini Sidebar

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

Two-Column Layout

The two-column layout features a primary icon bar and a secondary navigation panel. This layout is ideal for applications with deep menu hierarchies.

Primary column with category icons
Secondary column with detailed sub-navigation
See two-column.html for a working demo

Component Reference

Dreams AI includes 24+ UI components. Click on any component below to view its demo page.

Accordion

Alerts

Avatars

Badges

Breadcrumbs

Buttons

Button Groups

Cards

Clipboard

Collapse

Colors

Dragula

Dropdowns

Grid

Images

Lightbox

Modals

Nav Tabs

Offcanvas

Pagination

Popovers

Progress

Range Slider

Typography

Support

If this documentation does not address your questions, please feel free to contact us via email at Item Support Page

We are in the GMT+5:30 time zone and typically respond to inquiries on weekdays within 12-24 hours. Please note that in rare cases, the response time may extend to 48 hours, especially during holiday seasons.

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.

Don’t forget to Rate Dreams AI!

Please take a moment to rate our product on Themeforest. Your support means a lot to us. Just go to your Themeforest Profile > Downloads Tab, and you can leave a review for our script. Thank you!

License

Dreams AI 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?

Note

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.

Changelog

Version 1.0

19 Mar 2026

Initial Release

What's Included

90+ pages across HTML
8 dashboard variants (AI, Analytics, System, CRM, eCommerce, Healthcare, Finance, HR)
15+ AI generator tools
Dark mode support
RTL support
Responsive design
24+ UI components

Credits

NAME	URL
Tailwind	https://tailwindcss.com/
Tabler Icons	https://tabler.io/icons
Fontawesome	https://fontawesome.com/
Google Fonts	https://fonts.google.com/
Range-Slider	https://refreshless.com/nouislider/

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 that your project isn't just another cookie-cutter solution but a 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.

Book an Appointment Get a Free Quote

[email protected]

Dreams AI – Premium AI Admin Dashboard Template