🚀 hiraway Quick Start Guide

Get up and running with the hiraway HTML Dashboard in just a few minutes.

🤖 AI-Powered Development Experiment

This template is the result of an exciting experiment in vibe coding with AI. I explored the concept of collaborative development where human creativity meets AI capabilities to create modern, clean, and powerful admin dashboards.

The development process involved iterative AI collaboration, rapid prototyping, and continuous refinement to achieve a balance between aesthetic appeal and functional excellence. This represents a new approach to template development in the modern AI era.

📦 Installation

Download the hiraway-html.zip from your download area.
Extract the contents to your preferred local directory.
Navigate into the extracted hiraway-html/ folder.
If needed, install dependencies:
```
npm install
```

🔧 Running the Project

Option 1: Live Server (Recommended)

Install the Live Server extension in VS Code.
Right-click on index.html .
Select "Open with Live Server" .

Option 2: Using npm (Development Mode)

Run the development server:

npm run dev

Option 3: Production Server

For deployment in production using any web framework (like Laravel, Django, Next.js, etc), ensure these requirements are met:

Build the final CSS with Tailwind:
```
npm run build
```

Include the compiled CSS and JS in your layout or base template:

                <link rel="stylesheet" href="/path-to/assets/styles/hiraway.min.css">
                <script src="/path-to/assets/js/hiraway.js"></script>

Ensure static assets (images, fonts, icons) are correctly routed or placed in the public directory of your framework.

Option 4: Static Mode (No Framework)

If you don't use any backend or frontend framework, you can run hiraway as a fully static HTML dashboard:

Build the assets with Tailwind:
```
npm run build
```
Open the main file directly in your browser:
```
index.html
```

Make sure the file paths to CSS and JS are correct and relative:

                <link rel="stylesheet" href="./assets/styles/hiraway.min.css">
                <script src="./assets/js/hiraway.js"></script>

This approach is ideal for static hosting (like GitHub Pages, Netlify, Vercel, etc).

🧩 Basic Usage

Including CSS

Insert this into the <head> of your HTML file:

<link rel="stylesheet" href="assets/styles/hiraway.min.css" />

Including JavaScript

Place before your closing </body> tag:

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

📁 Folder Structure

        hiraway-html/
        ├── apps/
        ├── assets/
        │   ├── styles/
        │   ├── js/
        │   ├── images/
        │   └── fonts/
        ├── charts/
        ├── components/
        ├── dashboard/
        ├── documentation/
        ├── forms/
        ├── pages/
        ├── tables/
        ├── index.html
        ├── version.html
        ├── tailwind.config.js
        └── package.json

📦 External Libraries & Assets

✅ Libraries:

Tailwind CSS (MIT)
AG Grid Community (MIT)
Chart.js (MIT)
ApexCharts (MIT)

🖼️ Assets & Fonts:

Fonts: Inter, Poppins — Google Fonts (OFL)
Icons: Lucide (MIT), Material Design Icons (Apache 2.0)
Images: Unsplash (CC0), Pravatar, RandomUser.me (MIT)

💡 Tips

Use dark: utility classes for dark mode styling.
Store theme preferences using localStorage .
Ensure keyboard accessibility for navigation and UI.
Maintain semantic and clean HTML for SEO & usability.

❓ FAQ

Q: How to add a new page?
A: Duplicate any .html file and include it in the sidebar.
Q: How to use different icons?
A: You can use Lucide, Material Icons, or inline SVG.

📋 View See Changelog