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.
System Overview
The DreamsAI template requires a modern Laravel development environment with PHP 8.3+ support, essential extensions, and development tools for optimal performance and development experience.
Core Technologies
Backend Framework
Laravel 13.11.2
Frontend Framework
Tailwind 4
Programming Language
PHP 8.4
System Requirements
Composer
For PHP package dependency management
PHP Extensions
bcmath, ctype, fileinfo, json, mbstring, openssl, pdo, tokenizer, xml
Node.js
For Vite build process & SCSS compilation
Text Editor
VS Code, Sublime Text, or any code editor
Development Tools
Local Server
XAMPP/WAMP/MAMP
Version Control
Git
Web Browser
Any modern browser
Important Note
Ensure all PHP extensions are enabled in your server configuration. For production deployment, consider using a managed hosting service that supports Laravel 13.x and PHP 8.3+.
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
Project Overview
The Laravel project follows standard Laravel directory structure
with the main application located in dreams-ai/laravel/. The application includes all
standard Laravel directories for a complete application structure.
dreams-ai/
└── laravel/
├── app/
│ ├── Http/
│ │ ├── Controllers/
│ │ └── Middleware/
│ ├── Models/
│ └── Providers/
│
├── bootstrap/
│ └── cache/
│
├── config/
│ ├── app.php
│ ├── auth.php
│ └── database.php
│
├── database/
│ ├── factories/
│ ├── migrations/
│ └── seeders/
│
├── public/
│ ├── index.php
│ └── build/
│ ├── css/
│ ├── img/
│ ├── js/
│ └── libs/
│
├── resources/
│ ├── css/
│ ├── js/
│ ├── img/
│ └── views/
│ ├── layouts/
│ ├── partials/
│ └── pages/
│
├── routes/
│ ├── web.php
│ └── api.php
│
├── storage/
│ ├── app/
│ ├── framework/
│ └── logs/
│
├── tests/
│ └── Feature/
│
├── artisan
├── composer.json
├── package.json
└── vite.config.js
Laravel Blade Template Structure
DreamsAI uses Laravel's Blade templating engine with a master layout file and individual page templates for consistent design and functionality. Below are the actual files from the project.
Main Layout File
This is the actual master layout file from the project that provides the common HTML structure, navigation, and scripts for all pages:
<!DOCTYPE html>
<html lang="en">
<head>
@include('partials.head-css')
@include('partials.title-meta')
</head>
<body>
@include('partials.main-wrapper')
@include('partials.topbar')
@yield('content')
@include('partials.footer')
</div>
<!-- /Main Wrapper -->
@component('components.modal-popup')
@endcomponent
@include('partials.vendor-scripts')
</body>
</html>Sample Page Template
This is the actual starter page template from the project that extends the main layout:
@extends('layout.mainlayout')
@section('content')
<!-- ========================
Start Page Content
========================= -->
<div class="page-wrapper">
<!-- Start Content -->
<div class="content">
<!-- Page Header -->
<div class="d-flex align-items-center justify-content-between gap-2 mb-4 flex-wrap">
<div>
<h4 class="mb-0">Blank Page</h4>
</div>
<div class="gap-2 d-flex align-items-center flex-wrap">
<a href="javascript:void(0);" class="btn btn-icon btn-outline-light shadow" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Refresh" data-bs-original-title="Refresh"><i class="ti ti-refresh"></i></a>
<a href="javascript:void(0);" class="btn btn-icon btn-outline-light shadow" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Collapse" data-bs-original-title="Collapse" id="collapse-header"><i class="ti ti-transition-top"></i></a>
</div>
</div>
<!-- End Page Header -->
</div>
<!-- End Content -->
</div>
<!-- ========================
End Page Content
========================= -->
@endsectionKey Blade Template Features
Template Inheritance
@extends directive for master layout structure
Content Sections
@section and @yield for dynamic content injection
Partial Includes
@include directive for reusable partials (topbar, sidebar, footer)
Route Conditions
@if Route::is() for conditional layout rendering
Component System
@component directive for modal popup components
PHP Variables
PHP variables for page identification and routing
Laravel Framework Setup
Follow these steps to set up DreamsAI Laravel application on your local development environment. This guide covers Laravel-specific installation, environment configuration, and project setup.
Prerequisites
Installation Steps
Project Setup
Extract the DreamsAI Laravel project to your web server directory:
Install PHP Dependencies
Open terminal/command prompt in the Laravel project directory and run:
composer installInstall Node.js Dependencies
Install frontend dependencies for SCSS compilation:
npm installEnvironment Configuration
Configure your Laravel environment:
cp .env.example .envphp artisan key:generateDatabase Setup
Set up your database and run migrations:
php artisan migrateBuild Frontend Assets
Compile SCSS and build frontend assets:
npm run buildAccess Application
Start your web server and access the Laravel application:
php artisan servehttp://127.0.0.1:8000
yourdomain.com/laravel/public
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;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)
}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;
}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.blade.php in the HTML version for reference.
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
Dreams AI includes 24+ UI components. Click on any component below to view its demo page.
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?
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 |
|---|---|
| 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/ |
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 Dreams AI.
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.