ViteHTMLAdmin dashboardCorporate Website

kiaalap — Vite Admin dashboard Template

By puikinsh

Kiaalap is a free, open-source admin template from Colorlib for education, online courses, and school management. Built on Bootstrap 5 and Vite, it provides more than 65 ready-to-use pages.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews

Desktop homepage1 / 2

Visit websiteOpens in a new tab

Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-07View source

What stands out

A quick read of the recorded project description.

Built with Bootstrap 5 and Vite; pages are organized with Handlebars partials and have no jQuery dependency

Provides more than 65 pages covering education management modules such as students, professors, courses, departments, library, fees, calendar, and inbox

Charts use Chart.js, data tables use Simple-DataTables, and icons use Bootstrap Icons, all loaded locally from node_modules without third-party CDNs

Libraries such as Swiper, SimpleBar, Tom Select, CountUp, AOS, and FullCalendar are loaded on demand and are not in the main bundle

Includes dev, build, and preview scripts plus HTML/CSS/JS lint and formatting scripts, and provides a CHANGELOG documenting version changes

Released under the MIT license, permitting use, modification, commercial use, and distribution of the code while retaining the original author's copyright notice

Template Details

Kiaalap is an admin template for educational institutions, developed by Colorlib and released under the MIT license. It uses Bootstrap 5 as its styling framework and Vite as its build tool. Pages are organized with Handlebars templates and reusable partials (head, sidebar, header, footer, scripts), and the template provides more than 65 HTML pages.

The content centers on school and course management: students, professors, courses, departments, library assets, fees, calendar, and mail/inbox all have corresponding pages. It also includes general admin pages such as dashboards (multiple layouts), charts, tables, forms, authentication pages (login, registration, lock screen, password recovery), error pages (404, 500), maps, and invoices. Charts use Chart.js, data tables use Simple-DataTables, icons use Bootstrap Icons, rich text editing uses Quill, the calendar uses FullCalendar, and maps use Leaflet.

Technically, the template does not depend on jQuery. All scripts and styles load locally from node_modules, with no third-party CDN. Libraries such as Swiper, SimpleBar, Tom Select, CountUp, AOS, and FullCalendar are loaded on demand and included only on the relevant pages. The project provides npm scripts for dev, build, preview, lint:html, lint:css, lint:js, format, and clean, along with a CHANGELOG documenting the evolution from Bootstrap 3/4 versions to the current version.

Usage limitations: this template is a static front-end template and does not include back-end APIs, a database, or real business logic. Third-party assets such as images, fonts, and icons in the demo must be checked separately under their respective licenses; the MIT license covers only the code itself.

ViteHTMLAdmin panelCorporate website

Is it right for your project?

Use Cases

Building an admin interface prototype for a school or educational institution
Creating student, course, and teacher management pages for an online course platform
Preparing dashboards, charts, data tables, and form pages for an academic affairs system
Producing an admin entry point with authentication pages such as login, registration, lock screen, and password recovery
Using it as a front-end page starting point for further development in a Bootstrap 5 + Vite project

Suitable For

Front-end developers who need admin page assets for education management
Teams using a Bootstrap 5 and Vite technology stack
Projects that want to customize or commercialize based on MIT-licensed code
Scenarios that need static HTML page templates for prototype demos or internal system interfaces

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Requires Node.js 18+ and npm or yarn
2
After cloning the repository, run npm install to install dependencies, then run npm run dev to start the development server
3
Use npm run build for production builds; output goes to the dist directory
4
Check code with npm run lint:html, lint:css, and lint:js; format with npm run format
5
The template is a static front end and does not include back-end APIs or a database; business data must be integrated separately

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not mean external services or third-party assets are free.

Must comply with when using

The code in this version may be used, modified, commercialized, and distributed free of charge.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur separate charges.
When using, modifying, distributing, or selling this template, you must always state Colorlib as the original template author and retain the attribution notice.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

But you always need to state that [Colorlib](https://colorlib.com/) is the original author of this template.
Original README

https://github.com/puikinsh/kiaalap/blob/master/LICENSE https://github.com/puikinsh/kiaalap/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-07. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: More documented · 96 / 100
Technologies: Vite · HTML
Website type: Admin dashboard · Corporate Website

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-08-07
Screenshot last checked: 2026-10-07

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-08

Inspect the recorded source material

SHA-256: 80259086abcbc2870d00a341ac1eba7a21bc2a839577cd79f852816f94819ad9

2026-10-07T19:34:09.451Z

Source file / repository

# Kiaalap - Free Bootstrap 5 Education Admin Dashboard Template

![Kiaalap Dashboard](public/images/kiaalap-dashboard-preview.jpg)

Kiaalap is a free, open-source Bootstrap 5 admin dashboard template designed specifically for educational institutions. Built with modern web technologies and featuring 65+ ready-to-use pages, it provides everything needed to create a comprehensive education management system.

## 🎨 Demo

Check out the live demo: [Kiaalap Live Preview](https://colorlib.com/polygon/kiaalap/)

## ✨ Features

### Modern Technology Stack
- **Bootstrap 5.3.8** - Latest Bootstrap version with 100% jQuery-free architecture
- **Vite 8.2 Build System** - Lightning-fast development server and optimized production builds
- **Handlebars Templating** - Modular partials for maintainable code structure
- **Chart.js 4.5** - Beautiful, responsive charts replacing legacy Morris/C3/D3 libraries
- **Simple-DataTables 10.3** - Vanilla JavaScript data tables with no jQuery dependency
- **Bootstrap Icons 1.13.1** - 2,000+ icons loaded locally (no CDN dependencies)
- **Vanilla JavaScript** - Clean ES6+ code throughout the application
- **Zero third-party CDNs** - every script and stylesheet is served from your own origin
- **On-demand libraries** - heavy dependencies load only on the pages that use them

### Comprehensive Education Management
- **📊 Multiple Dashboard Layouts** - 3 unique dashboard designs for different use cases
- **👥 Student Management** - Complete student profiles, enrollment, and academic tracking
- **👨‍🏫 Professor Management** - Faculty profiles, course assignments, and schedules
- **📚 Course Management** - Course creation, scheduling, and curriculum management
- **📖 Library System** - Digital library asset management and tracking
- **🏢 Department Organization** - Department structure and administration
- **📧 Communication Tools** - Built-in messaging and notification system
- **📅 Event Calendar** - Academic calendar and event management
- **💰 Fee Management** - Student fees, payments, and financial tracking

### 65+ Ready-to-Use Pages

#### Dashboards & Analytics
- Main Dashboard (3 variants)
- Analytics Dashboard
- Widget Collections

#### Academic Pages
- All Students / Student Profile / Add Student
- All Professors / Professor Profile / Add Professor
- All Courses / Course Info / Add Course
- All Departments / Department Details / Add Department
- Library Assets Management

#### UI Components
- Buttons, Alerts, Modals
- Tabs & Accordions
- Forms (Basic & Advanced)
- Tables (Static & Dynamic with DataTables)
- Charts (Bar, Line, Area, Pie, Sparklines)

#### Additional Features
- Authentication Pages (Login, Register, Lock Screen, Password Recovery)
- Error Pages (404, 500)
- Email/Mailbox System
- Maps Integration
- Invoice Templates
- Profile Pages

## 🚀 Quick Start

### Prerequisites

- Node.js 18+
- npm or yarn

### Installation

1. **Clone the repository**
```bash
git clone https://github.com/puikinsh/kiaalap.git
cd kiaalap
```

2. **Install dependencies**
```bash
npm install
```

3. **Start development server**
```bash
npm run dev
```
The dashboard will open automatically at http://localhost:3000

4. **Build for production**
```bash
npm run build
```
Production files will be generated in the `dist/` directory

## 📦 Available Scripts

```bash
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint:html    # Validate HTML files
npm run lint:css     # Lint SCSS files
npm run lint:js      # Lint JavaScript files
npm run format       # Format code with Prettier
npm run clean        # Clean build directory
```

## 🏗️ Project Structure

```
kiaalap/
├── src/
│   ├── css/              # Custom stylesheets
│   ├── js/               # JavaScript modules
│   ├── partials/         # Handlebars partials (header, sidebar, footer)
│   ├── helpers/          # Handlebars helpers
│   └── scss/             # Sass source files
├── node_modules/         # Dependencies (all assets load locally)
├── *.html               # 65 HTML pages
├── vite.config.js       # Vite configuration
└── package.json         # Project dependencies
```

## 🎯 Key Features Explained

### 100% Modern Architecture
Completely rewritten from legacy Bootstrap 3/4 template to modern Bootstrap 5 with:
- Zero jQuery dependencies
- All assets from node_modules (no CDN dependencies)
- ES6+ JavaScript modules with tree-shaking
- Vite hot module replacement for instant updates
- Production builds optimized with Terser minification
- `npm audit` clean, and `lint:html` / `lint:css` / `lint:js` all pass with zero errors

### On-Demand Libraries
Swiper, SimpleBar, Tom Select, CountUp, AOS and FullCalendar are **not** in the
main bundle. Each is fetched only when a page needs it, keeping the shared
payload at ~97 kB gzipped.

Either add the hook and let it auto-initialise:

| Hook | Library |
|------|---------|
| `.swiper` | Swiper |
| `[data-simplebar]` | SimpleBar |
| `.tom-select` | Tom Select |
| `.countup` with `data-count` | CountUp |
| `[data-aos]` | AOS |

…or load one yourself when you need the constructor:

```js
const Swiper = await Kiaalap.load('swiper');
new Swiper('#hero', { loop: true });

const { Calendar, plugins } = await Kiaalap.load('fullcalendar');
```

### Handlebars Templating System
All 65 pages use a consistent template structure with reusable partials:
- `{{> head}}` - Centralized meta tags, CSS imports from node_modules
- `{{> sidebar}}` - Navigation with automatic active state management
- `{{> header}}` - Top header with user menu and notifications
- `{{> footer}}` - Footer with current year and copyright
- `{{> scripts}}` - JavaScript module imports from node_modules

Page-specific context managed in `vite.config.js` for dynamic navigation states, titles, and breadcrumbs.

### Local Asset Management
All assets served from node_modules for:
- **Better Performance** - No external network requests
- **Reliability** - Works offline, no CDN downtime
- **Version Control** - Lock specific versions via package.json
- **Bundle Optimization** - Tree-shaking and code splitting

### Custom Grid System
Bootstrap 5 grid enhanced with custom dashboard-grid classes:
```css
.dashboard-grid.grid-cols-4  /* 4 columns → 1 on mobile */
.dashboard-row               /* 24px bottom margin */
```

### Responsive & Accessible
- Mobile-first responsive design
- ARIA labels and semantic HTML
- Keyboard navigation support
- Screen reader friendly

## 🛠️ Customization

### Changing Colors
Edit the Sass variables in `src/scss/_variables.scss` to customize the color scheme.

### Adding New Pages
1. Create new HTML file using the Handlebars template structure
2. Add page context in `vite.config.js` if needed
3. Include custom CSS/JS as required

### Modifying Navigation
Edit `src/partials/sidebar.hbs` to customize the navigation menu structure.

## 📊 Built With

### Core Technologies
- [Bootstrap 5.3.8](https://getbootstrap.com/) - Modern CSS framework
- [Vite 8.2](https://vitejs.dev/) - Next generation build tool
- [Chart.js 4.5](https://www.chartjs.org/) - Flexible JavaScript charting
- [Handlebars 2.0](https://handlebarsjs.com/) - Semantic templating

### Key Libraries
- [Simple-DataTables 10.3](https://github.com/fiduswriter/Simple-DataTables) - Vanilla JS data tables
- [Bootstrap Icons 1.13.1](https://icons.getbootstrap.com/) - 2,000+ icon library
- [Quill 2.0.2](https://quilljs.com/) - Modern rich text editor
- [FullCalendar 7.0](https://fullcalendar.io/) - Event calendar
- [Leaflet 1.9](https://leafletjs.com/) - Interactive maps
- [Tom Select 2.6](https://tom-select.js.org/) - Modern select library
- [Cropper.js 2.1](https://fengyuanchen.github.io/cropperjs/) - Image cropping
- [CountUp.js 2.10](https://inorganik.github.io/countUp.js/) - Number animations
- [Prism 1.30](https://prismjs.com/) - Syntax highlighting

## 🌐 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 📝 Version History

- **v3.0.0** (2026) - Security, performance & accessibility overhaul: all Dependabot alerts resolved, CDNs removed, on-demand library loading, zero HTML validation errors. **Contains breaking changes** — see [CHANGELOG.md](CHANGELOG.md)
- **v2.3.0** (2026) - Dependency updates, fixed dashboard screenshot, ESLint v10 flat config migration
- **v2.2.0** (2025) - All dependencies updated to latest versions, improved documentation
- **v2.1.0** (2025) - Mailbox system improvements, legacy asset cleanup, enhanced card styling
- **v2.0.0** (2025) - Complete modernization: Bootstrap 5, Vite build system, jQuery elimination
- **v1.0.0** (2018) - Original release with Bootstrap 3/4

See [CHANGELOG.md](CHANGELOG.md) for detailed version history.

## 📄 License

Kiaalap is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that [Colorlib](https://colorlib.com/) is the original author of this template.

## 🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/puikinsh/kiaalap/issues).

## 💪 Support

If you find this template useful, please consider:
- ⭐ Starring the repository
- 🐛 Reporting bugs
- 📢 Spreading the word
- 🤝 Contributing to the project

## 🏆 Credits

- Created by [Colorlib](https://colorlib.com/)
- Distributed by [DashboardPack.com](https://dashboardpack.com/)
- Original design and development by Aigars Silkalns

---

## About Colorlib

Colorlib is the #1 source for free & premium Bootstrap templates, WordPress themes, and UI kits. We create beautiful, easy-to-use templates and themes that help developers and designers build amazing websites.

- Website: [https://colorlib.com/](https://colorlib.com/)
- GitHub: [https://github.com/ColorlibHQ](https://github.com/ColorlibHQ)
- Twitter: [@colorlib](https://twitter.com/colorlib)

## About DashboardPack

[DashboardPack.com](https://dashboardpack.com/) is a marketplace for premium and free admin dashboard templates. We curate and distribute high-quality dashboard templates for various frameworks and use cases.

---

## 📚 Helpful Resources from Colorlib

Looking for more templates or web development resources? Check out these curated collections and articles from Colorlib:

### Admin Dashboard Collections
- [Best Free Bootstrap Admin Dashboard Templates](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/) - Top free admin templates
- [Bootstrap Dashboard Templates](https://colorlib.com/wp/bootstrap-dashboard/) - Comprehensive list of dashboard templates
- [Free HTML5 Admin Dashboard Templates](https://colorlib.com/wp/free-html5-admin-dashboard-templates/) - HTML5-based admin panels
- [Angular Dashboard Templates](https://colorlib.com/wp/angular-dashboard-templates/) - For Angular developers
- [React Dashboard Templates](https://colorlib.com/wp/react-dashboard-templates/) - React-based admin panels
- [Vue Dashboard Templates](https://colorlib.com/wp/vue-dashboard-templates/) - Vue.js admin templates


### Bootstrap Resources
- [Bootstrap 5 Templates](https://colorlib.com/wp/bootstrap-5-templates/) - Latest Bootstrap 5 themes
- [Free Bootstrap Templates](https://colorlib.com/wp/free-bootstrap-templates/) - Comprehensive collection of free themes
- [Bootstrap Portfolio Templates](https://colorlib.com/wp/bootstrap-portfolio-templates/) - Portfolio and personal websites
- [Bootstrap Business Templates](https://colorlib.com/wp/bootstrap-business-templates/) - Business and corporate themes

### Web Development Tools & Resources
- [CSS Templates](https://colorlib.com/wp/css-templates/) - Pure CSS website templates
- [HTML Website Templates](https://colorlib.com/wp/html-website-templates/) - HTML5 website designs
- [JavaScript Templates](https://colorlib.com/wp/javascript-templates/) - JS-powered templates
- [WordPress Themes](https://colorlib.com/wp/wordpress-themes/) - Free WordPress themes

### Other Popular Admin Templates from Colorlib
- [Adminator](https://github.com/puikinsh/Adminator-admin-dashboard) - Responsive Admin Dashboard Template
- [AdminLTE](https://github.com/ColorlibHQ/AdminLTE) - Best open source admin dashboard & control panel theme
- [Gentelella](https://github.com/ColorlibHQ/gentelella) - Free Bootstrap 5 Admin Dashboard Template
- [Notika](https://colorlib.com/polygon/notika/) - Bootstrap 5 Admin Template
- [Nalika](https://colorlib.com/polygon/nalika/) - Bootstrap 5 Admin Template
- [Concept](https://colorlib.com/polygon/concept/) - Bootstrap 5 Admin Dashboard

### Colorlib Blog & Tutorials
- [Web Design Blog](https://colorlib.com/wp/) - Latest trends and tutorials in web design
- [Bootstrap Tutorials](https://colorlib.com/wp/cat/bootstrap/) - Learn Bootstrap development
- [Template Customization Guides](https://colorlib.com/wp/cat/tutorial/) - How-to guides for template customization

---

**Join the Colorlib Community:**
- 💬 [Support Forum](https://colorlibsupport.com) - Get help from the community
- 🐦 [Twitter](https://twitter.com/colorlib) - Follow for daily web design inspiration
- 📘 [Facebook](https://www.facebook.com/Colorlib) - Join our Facebook community
- 📺 [YouTube](https://www.youtube.com/c/Colorlib) - Video tutorials and showcases

Built with ❤️ by [Colorlib](https://colorlib.com/) and distributed by [DashboardPack](https://dashboardpack.com/)

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

business-website-template

A React, Tailwind CSS, and Vite corporate website template with a single-page structure covering header, hero, features, billing, product showcase, testimonials, clients, call-to-action, and footer.

Vite · Corporate Website

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

admin-antd-react

A Vite + React 18 admin template using Ant Design and Recoil, with login, logout, and registration flows; page, button, and permission configuration verification; internationalization; dynamic sidebar and breadcrumbs; Svg Sprite icons; Mock data; and list, form, and detail page examples.

Vite · Admin dashboard

arco-admin-template

A Vite + React mid-to-back-office template using Arco Design, react-router-dom v6, mockjs, and less, with internationalization, theme customization, and light/dark switching. Includes login, dashboard, resource, component examples, settings, and 404 pages.

Vite · Admin dashboard

super-admin

A React, Vite, and Antd admin template that implements multi-tab route caching similar to Vue keepalive and route-based permission control.

Vite · Admin dashboard

react-vite-tailwind-typescript-firebase-auth-template

A starter template for backend applications using Vite, React, TypeScript, TailwindCSS, and Firebase Auth, featuring login and dashboard interfaces. Requires your own Firebase project and credentials in .env; no backend logic included.

Vite · Admin dashboard