Edu Admin - Documentation

Comprehensive guide to installing, customizing, and using the Edu Admin Dashboard Kit.

Version 1.0.0 • Created: Jan 2026

Introduction

Thank you for purchasing Edu Admin. This template is designed for educational institutions, schools, universities, and online learning platforms. It is built using Tailwind CSS 3 and plain HTML5/JavaScript, ensuring high performance, easy customization, and no heavy dependency chains.

Whether you are building a student portal, a teacher dashboard, or an admin control panel, Edu Admin provides all the essential UI components and pages you need.

Folder Structure

The package content is organized as follows:

/root
├── /assets
│   ├── /css           # Compiled CSS and input files
│   ├── /js            # Theme scripts (theme.js)
│   ├── /images        # Demo images and assets
│   └── /icons         # SVG icons (if local)
├── /pages             # All dashboard HTML pages (students, courses, etc.)
├── /node_modules      # NPM dependencies (after install)
├── index.html         # Redirect or Entry point
├── landing.html       # Marketing Landing Page
├── package.json       # NPM dependency list
└── tailwind.config.js # Tailwind configuration file

Getting Started

Note: The following steps are OPTIONAL.

Edu Admin comes pre-bundled with compiled CSS. You can start using the template immediately by opening index.html in your browser. Follow these steps only if you wish to customize the Tailwind theme, compilation, or add new utility classes.

If you plan to make advanced customizations, you'll need Node.js installed on your machine for compiling Tailwind CSS.

1. Install Dependencies

Open your terminal in the project root directory and run:

npm install

2. Run Development Server

To watch for CSS changes and compile Tailwind automatically while you work:

npm run watch:css

Note: Since this is an HTML template, you can view the files directly in your browser or use a simple static server like Live Server for VS Code.

3. Build for Production

To generate the final minified CSS file for deployment:

npm run build:css

HTML Structure

Each page follows a consistent layout structure consisting of a Sidebar, Header, and Main Content area.

<body>
  <!-- Wrapper -->
  <div class="flex h-screen bg-gray-50">
    
    <!-- Sidebar -->
    <aside class="...">
      ... Logo & Navigation ...
    </aside>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
      
      <!-- Header -->
      <header class="...">
        ... Search, Notifications, Profile ...
      </header>

      <!-- Page Content -->
      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-6">
        ... Dashboard Content ...
      </main>

    </div>
  </div>
</body>

Customization

Changing Colors

Colors are defined in tailwind.config.js under the theme.extend.colors section. We use a semantic naming convention (primary, secondary, surface, etc.).

// tailwind.config.js
theme: {
  extend: {
    colors: {
      primary: {
        50: '#f5f3ff',
        // ...
        600: '#7c3aed', // Main Brand Color
      }
    }
  }
}

Simply change the hex codes here and run the build command to update the extensive color system across the app.

Fonts

We use Inter and Poppins from Google Fonts. To change them, update the fontFamily section in tailwind.config.js and change the import link in your HTML <head>.

JavaScript

The core theme logic is handled in assets/js/theme.js. This file includes minimal, dependency-free code for:

  • Sidebar Toggle: Handling mobile responsiveness.
  • Dark Mode: Toggling the .dark class on the HTML tag.
  • Icon Initialization: Initializing Lucide icons.

External libraries used:

  • Lucide Icons: For the icon set.
  • ApexCharts (Optional): Used in dashboard.html for charts.

Sources & Credits

We are grateful for the following open-source resources used in this project: