🚀 Live Preview 📦 GitHub Repository 🏠 Local Demo

# ElaAdmin Documentation

Welcome to the official documentation for ElaAdmin - a modern, responsive Bootstrap 5 admin dashboard template with over 30+ ready-to-use pages and comprehensive UI components.

Version 3.0 Release - Complete Bootstrap 5 migration with Vite 7, removal of jQuery dependency, modern ES6+ JavaScript, Handlebars templating, and significant performance improvements.

## Overview

ElaAdmin is a professional admin dashboard template designed for building modern web applications. It provides a clean, intuitive interface with extensive customization options and a comprehensive set of pre-built components.

### Key Technologies

🎨

##### Bootstrap 5.3.7

Latest Bootstrap without jQuery

⚡

##### Vite 7.0.6

Lightning-fast build tool

🎯

##### Sass 1.90.0

Modern CSS preprocessing

📱

##### Responsive Design

Mobile-first approach

🔧

##### Handlebars

Template engine

📊

##### Chart.js 4.5

Data visualization

### What's Included

- 30+ Ready-to-use HTML pages
- Comprehensive UI components library
- Multiple dashboard variations
- Authentication pages (Login, Register, etc.)
- Form components with validation
- Advanced data tables with export features
- Multiple chart libraries integrated
- Google Maps and Vector Maps
- Font Awesome 7 icons
- Cross-browser compatibility
- Fully responsive design
- Clean and commented code

## Quick Start

Get ElaAdmin up and running in less than 5 minutes with these simple steps.

#### Option 1: Download from GitHub

1. Visit the GitHub repository
2. Click the "Code" button and select "Download ZIP"
3. Extract the files to your project directory
4. Follow the installation steps below

#### Option 2: Clone via Git

    git clone https://github.com/puikinsh/ElaAdmin.git
    cd ElaAdmin
    npm install
    npm run dev

#### Option 3: View Live Demo

Preview the template before downloading:

View Live Demo →

## Installation

Detailed installation instructions for setting up ElaAdmin in your development environment.

### System Requirements

- Node.js: Version 18.0 or higher
- npm: Version 8.0 or higher (comes with Node.js)
- Git: For version control (optional)
- Code Editor: VS Code, Sublime Text, or any modern editor

### Installation Steps

#### 1. Install Node.js

Download and install Node.js from nodejs.org. This will also install npm.

#### 2. Verify Installation

    # Check Node.js version
    node --version

    # Check npm version
    npm --version

#### 3. Install Dependencies

    # Navigate to project directory
    cd elaadmin

    # Install all dependencies
    npm install

    # If you encounter issues, try:
    npm install --legacy-peer-deps

#### 4. Start Development Server

    # Start Vite dev server
    npm run dev

    # Server will start at http://localhost:3000

### Common Installation Issues

Port Already in Use: If port 3000 is busy, Vite will automatically use the next available port (3001, 3002, etc.)
Permission Errors: On macOS/Linux, you might need to use `sudo npm install` or fix npm permissions.

## Project Structure

Understanding the organization of files and directories in ElaAdmin.

    elaadmin/
    │
    ├── src/                         # Source files
    │   ├── js/                      # JavaScript files
    │   │   ├── main.js             # Main entry point
    │   │   └── pages/              # Page-specific scripts
    │   │       ├── dashboard.js    # Dashboard functionality
    │   │       ├── charts.js       # Chart configurations
    │   │       ├── forms.js        # Form validations
    │   │       └── ui-sweetalert.js # SweetAlert demos
    │   │
    │   ├── scss/                    # SCSS stylesheets
    │   │   ├── main.scss           # Main stylesheet
    │   │   ├── _variables.scss     # SCSS variables
    │   │   └── components/         # Component styles
    │   │       ├── _sidebar.scss   # Sidebar styles
    │   │       ├── _header.scss    # Header styles
    │   │       └── _footer.scss    # Footer styles
    │   │
    │   └── partials/               # Handlebars templates
    │       ├── head.hbs            # HTML head section
    │       ├── header-ela.hbs      # Header navigation
    │       ├── sidebar-ela.hbs     # Sidebar navigation
    │       ├── footer.hbs          # Footer section
    │       └── scripts.hbs         # Script includes
    │
    ├── assets/                     # Static assets
    │   └── images/                 # Image files
    │       ├── logo/              # Logo variations
    │       └── users/             # User avatars
    │
    ├── dist/                       # Production build (generated)
    │
    ├── node_modules/               # Dependencies (generated)
    │
    ├── *.html                      # HTML pages
    │   ├── index.html             # Main dashboard
    │   ├── charts.html            # Chart examples
    │   ├── forms-basic.html       # Form components
    │   ├── tables-data.html       # Data tables
    │   └── ... (30+ pages)
    │
    ├── package.json               # NPM configuration
    ├── package-lock.json          # Locked dependencies
    ├── vite.config.js            # Vite configuration
    ├── .gitignore                # Git ignore rules
    ├── CLAUDE.md                 # AI assistance guide
    └── documentation.html        # This documentation

### Key Directories Explained

#### 📁 src/js/

Contains all JavaScript source files. The `main.js` is the entry point that initializes Bootstrap and common functionality. Page-specific scripts are in the `pages/` subdirectory.

#### 📁 src/scss/

SCSS source files for styling. Uses modern SCSS module syntax with `@use` and `@forward`. Variables and mixins are centralized for easy theming.

#### 📁 src/partials/

Handlebars template partials for reusable components. These are automatically included during the build process to reduce code duplication.

## Migration Guide

Upgrading from ElaAdmin 2.x to 3.0 or migrating from other templates.

### What's Changed in v3.0

Feature | Version 2.x | Version 3.0
--- | --- | ---
Bootstrap | 4.x with jQuery | 5.3.7 (no jQuery)
Build Tool | Gulp/Webpack | Vite 7
JavaScript | ES5 + jQuery | ES6+ Modules
Templating | Static HTML | Handlebars
Icons | Font Awesome 5 | Font Awesome 7
Package Manager | npm/bower | npm only

### Migration Steps

#### 1. Update Bootstrap Classes

    // Bootstrap 4 → Bootstrap 5
    .ml-* → .ms-*  (margin-left to margin-start)
    .mr-* → .me-*  (margin-right to margin-end)
    .pl-* → .ps-*  (padding-left to padding-start)
    .pr-* → .pe-*  (padding-right to padding-end)

    // Data attributes
    data-toggle → data-bs-toggle
    data-target → data-bs-target
    data-dismiss → data-bs-dismiss

#### 2. Remove jQuery Dependencies

    // Old jQuery code
    $('#myButton').click(function() {
      $('#myModal').modal('show');
    });

    // New vanilla JavaScript
    document.getElementById('myButton').addEventListener('click', function() {
      const modal = new bootstrap.Modal(document.getElementById('myModal'));
      modal.show();
    });

#### 3. Update Form Classes

    // Bootstrap 4
    <div class="form-group">
      <label>Email</label>
      <input class="form-control">
    </div>

    // Bootstrap 5
    <div class="mb-3">
      <label class="form-label">Email</label>
      <input class="form-control">
    </div>

## Development Setup

Configure your development environment for optimal productivity.

### Development Server

    # Start development server with hot reload
    npm run dev

    # The server provides:
    # - Hot Module Replacement (HMR)
    # - Auto-refresh on file changes
    # - Error overlay
    # - Network access for mobile testing

### Available NPM Scripts

Command | Description
--- | ---
`npm run dev` | Start development server on port 3000
`npm run build` | Build for production to dist/ folder
`npm run preview` | Preview production build locally
`npm run lint` | Run ESLint on JavaScript files
`npm run format` | Format code with Prettier

### Creating New Pages

#### Step 1: Create HTML File

    <!doctype html>
    <html lang="en">
      <head>
        {{> head title="My New Page"}}
      </head>
      <body>
        <div class="wrapper">
          {{> sidebar-ela}}
          <div class="main-content">
            {{> header-ela}}
            <main class="content">
              <div class="container-fluid">
                <!-- Your content here -->
              </div>
            </main>
            {{> footer}}
          </div>
        </div>
        {{> scripts}}
      </body>
    </html>

#### Step 2: Add Page-Specific JavaScript (Optional)

    // src/js/pages/my-page.js
    import Chart from 'chart.js/auto';

    // Your page-specific code
    document.addEventListener('DOMContentLoaded', function() {
      // Initialize components
    });

#### Step 3: Update Scripts Partial

Add your page to the dynamic loading in `src/partials/scripts.hbs` if it needs specific JavaScript.

## Build Process

Understanding the Vite build process and optimization techniques.

### Production Build

    # Create optimized production build
    npm run build

    # Output structure:
    dist/
    ├── assets/
    │   ├── css/
    │   │   └── main-[hash].css    # Minified CSS
    │   ├── js/
    │   │   └── main-[hash].js     # Minified JS
    │   └── images/                # Optimized images
    ├── index.html                  # Entry point
    └── ... (other HTML files)

### Build Features

- Automatic code splitting for optimal loading
- CSS and JavaScript minification
- Asset optimization and compression
- Tree shaking to remove unused code
- Source maps for debugging
- Cache busting with hashed filenames
- Automatic vendor chunk extraction

### Preview Production Build

    # Build and preview
    npm run build
    npm run preview

    # Opens at http://localhost:4173

## Deployment

Deploy ElaAdmin to various hosting platforms.

### Static Hosting (Recommended)

#### Netlify

1. Push your code to GitHub
2. Connect repository to Netlify
3. Set build command: `npm run build`
4. Set publish directory: `dist`
5. Deploy

#### Vercel

    # Install Vercel CLI
    npm i -g vercel

    # Deploy
    vercel --prod

#### GitHub Pages

    # Install gh-pages
    npm install --save-dev gh-pages

    # Add to package.json scripts:
    "deploy": "npm run build && gh-pages -d dist"

    # Deploy
    npm run deploy

### Traditional Web Hosting

1. Run `npm run build`
2. Upload contents of `dist/` folder to your web server
3. Ensure your server serves `index.html` as the default

## Layout Structure

ElaAdmin uses a flexible layout system with reusable components.

### Basic Layout

    <div class="wrapper">
      <!-- Sidebar -->
      <aside id="left-panel" class="left-panel">
        <!-- Navigation menu -->
      </aside>

      <!-- Main Content -->
      <div class="main-content">
        <!-- Header -->
        <header class="header">
          <!-- Top navigation -->
        </header>

        <!-- Page Content -->
        <main class="content">
          <div class="container-fluid">
            <!-- Your content -->
          </div>
        </main>

        <!-- Footer -->
        <footer class="footer">
          <!-- Footer content -->
        </footer>
      </div>
    </div>

### Sidebar Navigation

    <nav class="nav-menu">
      <!-- Single item -->
      <div class="nav-item">
        <a href="index.html" class="nav-link">
          <i class="nav-icon fas fa-home"></i>
          <span class="nav-text">Dashboard</span>
        </a>
      </div>

      <!-- Dropdown menu -->
      <div class="nav-item has-submenu">
        <a href="#" class="nav-link" data-menu="components">
          <i class="nav-icon fas fa-puzzle-piece"></i>
          <span class="nav-text">Components</span>
          <i class="nav-arrow fas fa-chevron-right"></i>
        </a>
        <div class="nav-submenu">
          <a href="ui-buttons.html" class="submenu-link">
            <i class="submenu-icon far fa-circle"></i>
            <span>Buttons</span>
          </a>
        </div>
      </div>
    </nav>

## UI Components

Comprehensive collection of pre-built UI components.

### Cards

    <!-- Basic Card -->
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Card Title</h4>
      </div>
      <div class="card-body">
        <p>Card content goes here</p>
      </div>
      <div class="card-footer">
        <button class="btn btn-primary">Action</button>
      </div>
    </div>

    <!-- Statistics Card -->
    <div class="card widget-card">
      <div class="card-body">
        <div class="stat-widget-five">
          <div class="stat-icon flat-color-1">
            <i class="fas fa-dollar-sign"></i>
          </div>
          <div class="stat-content">
            <div class="stat-text">$23,569</div>
            <div class="stat-heading">Revenue</div>
          </div>
        </div>
      </div>
    </div>

### Alerts

    <!-- Dismissible Alert -->
    <div class="alert alert-success alert-dismissible fade show">
      <strong>Success!</strong> Your changes have been saved.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- Alert Variations -->
    <div class="alert alert-primary">Primary alert</div>
    <div class="alert alert-secondary">Secondary alert</div>
    <div class="alert alert-success">Success alert</div>
    <div class="alert alert-danger">Danger alert</div>
    <div class="alert alert-warning">Warning alert</div>
    <div class="alert alert-info">Info alert</div>

### Buttons

    <!-- Button Styles -->
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-info">Info</button>

    <!-- Button Sizes -->
    <button class="btn btn-primary btn-lg">Large</button>
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-sm">Small</button>

    <!-- Button with Icon -->
    <button class="btn btn-primary">
      <i class="fas fa-download me-2"></i>Download
    </button>

### Modals

    <!-- Modal Trigger -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch Modal
    </button>

    <!-- Modal Structure -->
    <div class="modal fade" id="exampleModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal Title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            Modal content goes here
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

## Forms

Bootstrap 5 form components with validation support.

### Basic Form

    <form class="needs-validation" novalidate>
      <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" required>
        <div class="invalid-feedback">
          Please provide a valid email.
        </div>
      </div>

      <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" required>
        <div class="invalid-feedback">
          Password is required.
        </div>
      </div>

      <div class="mb-3">
        <label for="select" class="form-label">Select Option</label>
        <select class="form-select" id="select" required>
          <option value="">Choose...</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
      </div>

      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="agree" required>
          <label class="form-check-label" for="agree">
            Agree to terms and conditions
          </label>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

### Form Validation JavaScript

    // Bootstrap 5 form validation
    (function() {
      'use strict';

      // Fetch all forms with validation
      const forms = document.querySelectorAll('.needs-validation');

      // Loop and prevent submission
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
          }

          form.classList.add('was-validated');
        }, false);
      });
    })();

## Tables

Responsive tables with DataTables integration for advanced features.

### Basic Table

    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>Admin</td>
            <td><span class="badge badge-success">Active</span></td>
            <td>
              <button class="btn btn-sm btn-primary">Edit</button>
              <button class="btn btn-sm btn-danger">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

### DataTables Integration

    // Initialize DataTable
    import DataTable from 'datatables.net-bs5';

    document.addEventListener('DOMContentLoaded', function() {
      const table = new DataTable('#myTable', {
        responsive: true,
        pageLength: 25,
        order: [[0, 'asc']],
        language: {
          search: "Search records:",
          lengthMenu: "Show _MENU_ entries"
        }
      });
    });

## Charts

Multiple chart libraries integrated for data visualization.

### Chart.js Example

    import Chart from 'chart.js/auto';

    // Line Chart
    const ctx = document.getElementById('lineChart').getContext('2d');
    const lineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: 'Sales',
          data: [12, 19, 3, 5, 2, 3],
          borderColor: 'rgb(75, 192, 192)',
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          tension: 0.4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: true,
            position: 'top'
          }
        }
      }
    });

### Available Chart Types

- Line Charts
- Bar Charts
- Pie & Doughnut Charts
- Area Charts
- Radar Charts
- Polar Area Charts
- Bubble Charts
- Scatter Charts

## Available Pages

ElaAdmin includes 30+ ready-to-use pages for various purposes.

### Dashboard Pages

- index.html - Main dashboard with statistics
- index2.html - Alternative dashboard layout
- index3.html - E-commerce dashboard
- index4.html - Analytics dashboard

### UI Components

- ui-buttons.html - Button variations
- ui-badges.html - Badges and labels
- ui-tabs.html - Tabs and pills
- ui-cards.html - Card components
- ui-alerts.html - Alert messages
- ui-progressbar.html - Progress bars
- ui-modals.html - Modal dialogs
- ui-switches.html - Toggle switches
- ui-grids.html - Grid system
- ui-typgraphy.html - Typography
- ui-sweetalert.html - SweetAlert2 examples

### Forms

- forms-basic.html - Basic form elements
- forms-advanced.html - Advanced components

### Tables

- tables-basic.html - Basic tables
- tables-data.html - DataTables integration

### Charts

- charts-chartjs.html - Chart.js examples
- charts-flot.html - Flot charts
- charts-peity.html - Peity charts

### Icons & Maps

- font-fontawesome.html - Font Awesome icons
- font-themify.html - Themify icons
- maps-gmap.html - Google Maps
- maps-vector.html - Vector maps

### Other Pages

- widgets.html - Widget collection
- page-login.html - Login page
- page-register.html - Registration page
- pages-forget.html - Password recovery
- pages-404.html - 404 error page

## Theming

Customize ElaAdmin's appearance to match your brand.

### Color Variables

    // src/scss/_variables.scss

    // Primary colors
    $primary: #0d6efd;
    $secondary: #6c757d;
    $success: #198754;
    $info: #0dcaf0;
    $warning: #ffc107;
    $danger: #dc3545;
    $light: #f8f9fa;
    $dark: #212529;

    // Custom theme colors
    $sidebar-bg: #1a1c23;
    $sidebar-text: #8b92a9;
    $sidebar-hover: #5a5c69;
    $header-bg: #ffffff;
    $header-border: #e3e6f0;

    // Layout dimensions
    $sidebar-width: 280px;
    $sidebar-collapsed-width: 70px;
    $header-height: 70px;
    $footer-height: 60px;

### Typography

    // Font settings
    $font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
    $font-size-base: 1rem;
    $font-weight-base: 400;
    $line-height-base: 1.5;

    // Headings
    $h1-font-size: $font-size-base * 2.5;
    $h2-font-size: $font-size-base * 2;
    $h3-font-size: $font-size-base * 1.75;
    $h4-font-size: $font-size-base * 1.5;
    $h5-font-size: $font-size-base * 1.25;
    $h6-font-size: $font-size-base;

    $headings-font-weight: 600;
    $headings-line-height: 1.2;
    $headings-color: $dark;

### Creating Custom Themes

1. Copy `src/scss/_variables.scss` to `_variables-custom.scss`
2. Modify the color values in your custom file
3. Update `main.scss` to import your custom variables
4. Rebuild the project with `npm run build`

## Included Plugins

ElaAdmin comes with a comprehensive set of pre-integrated plugins.

Plugin | Version | Description | Documentation
--- | --- | --- | ---
Bootstrap | 5.3.7 | CSS framework | Docs
Font Awesome | 7.0.0 | Icon library | Docs
Chart.js | 4.5.0 | Charts & graphs | Docs
DataTables | 2.3.2 | Advanced tables | Docs
SweetAlert2 | 11.22.2 | Beautiful alerts | Docs
Flatpickr | 4.6.13 | Date picker | Docs
FullCalendar | 6.1.18 | Event calendar | Docs
Select2 | 4.1.0 | Enhanced selects | Docs
Toastr | 2.1.4 | Toast notifications | Docs

## Browser Support

ElaAdmin is tested and supported on all modern browsers.

Browser | Version | Support
--- | --- | ---
Chrome | Last 2 versions | ✅ Full Support
Firefox | Last 2 versions | ✅ Full Support
Safari | Last 2 versions | ✅ Full Support
Edge | Last 2 versions | ✅ Full Support
Opera | Last 2 versions | ✅ Full Support
Internet Explorer | 11 | ❌ Not Supported

Note: Internet Explorer is not supported as Bootstrap 5 has dropped IE support.

## Changelog

Track the evolution of ElaAdmin through version updates.

#### Version 3.0.0 - August 2025

- Complete migration to Bootstrap 5.3.7
- Upgraded to Vite 7.0.6 build system
- Removed jQuery dependency entirely
- Implemented Handlebars templating
- Updated to Font Awesome 7.0.0
- Updated all dependencies to latest versions
- Improved mobile responsiveness
- Added SweetAlert2 examples page
- Fixed all security vulnerabilities
- Optimized bundle size by 40%

#### Version 2.1.0 - June 2023

- Updated Bootstrap to 4.6.2
- Added dark mode support
- New dashboard variations
- Improved chart components
- Bug fixes and performance improvements

#### Version 2.0.0 - January 2023

- Major redesign of UI components
- Added new page templates
- Webpack integration
- SCSS architecture refactor
- Cross-browser compatibility fixes

## Frequently Asked Questions

#### Can I use ElaAdmin for commercial projects?

Yes! ElaAdmin is released under the MIT license, which allows both personal and commercial use.

#### Do I need to keep the footer credits?

No, you can remove or modify the footer credits as needed for your project.

#### Is jQuery required?

No, version 3.0 has completely removed jQuery dependency. All functionality uses vanilla JavaScript.

#### How do I update from version 2.x?

Check the Migration Guide section for detailed upgrade instructions.

#### Can I use only specific components?

Yes, the modular structure allows you to use only the components you need.

#### Is there TypeScript support?

Currently, ElaAdmin uses vanilla JavaScript. TypeScript support is planned for a future release.

## Support

Get help when you need it.

#### 📚 Documentation

This comprehensive guide covers all aspects of using and customizing ElaAdmin.

#### 💬 GitHub Issues

For bug reports and feature requests, please use the GitHub Issues page.

#### 📧 Email Support

For additional support, contact the Colorlib team through their contact page.

### Useful Resources

- GitHub Repository
- Live Preview
- Colorlib Website
- Bootstrap 5 Documentation
- Vite Documentation

## License

ElaAdmin is open source and available under the MIT License.

#### MIT License

Copyright (c) 2025 Colorlib

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Summary: You are free to use ElaAdmin in personal and commercial projects. You can modify, distribute, and even sell it as part of your product.