🛠️ How to Set Up the Project

🔧 Setup AI for API Integration

Follow these steps to configure your API key for the Thunder AI Admin Dashboard Template:

• 1. ✅ Rename the Environment File

  Locate the example file in your project directory and rename it from:

  html/assets/js/env.js.example
  to:
  html/assets/js/env.js

  This will activate the environment configuration used by the dashboard.

• 2. 🔑 Set Your Actual API Key

  Open the newly renamed file env.js in your preferred code editor.

  Find the placeholder key and replace it with your actual Gemini API key:

  Create your Gemini API key Here
  GEMINI_API_KEY = "your_actual_api_key_here";

  Make sure to keep your API key confidential and never expose it in public repositories.

🎨 Customizing the Theme

Our dashboard uses CSS Variables for colors, spacing, and typography, making customization super easy.

🔧 Change Theme Colors

Open:

Edit CSS variables:

[data-thunderal="theme-indigo"] {
    --bs-primary: #6C50BF;
    --bs-primary-rgb: 108, 80, 191;
    --bs-primary-bg-subtle: #BABDFD;
    --bs-btn-bg: #6C50BF;
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-nav-pills-link-active-bg: #6C50BF;

    --primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));   
}

🔤 Change Google Font

Switch between 4 pre-set fonts via the settings UI or update Class in body class=""

🟦 Border Radius

Apply or remove border radius site-wide from settings body class="radius-0"

📁 Folder Structure

Here’s a breakdown of the file structure in Thunder AI:

• 📁 HTML
  • 📁 assets: The source files for the theme.
    • css: Custom css and framework css (Bootstrap)
    • images: Image assets.
    • js: JavaScript source files.
    • plugins: third party plugins js files.
  • 📁 Crypto: Crypto Admin Module
  • 📁 Hospital: Hospital Admin Module
  • 📁 HRMS: HRMS Admin Module
  • 📁 Transport: Transport Admin Module
  • index.html
  • LICENSE.md: Theme license.
  • README.md: Theme overview.
• 📁 HTML Starter kits
  1. 📁 Layout 1
     • 📁 assets: The source files for the theme.
       • css: Custom css and framework css (Bootstrap)
       • images: Image assets.
       • js: JavaScript source files.
       • plugins: third party plugins js files.
     • index.html
  2. 📁 Layout 2
  3. 📁 Layout 3
  4. 📁 More Soon...

🧩 Components & Utilities

We've included a set of reusable UI components:

• Accordion, Avatar, Buttons, Badges, Cards, Dropdowns, Modals and more...
• Tables, Forms, Alerts
• Sidebar, Topbar, Footer
• Widgets, Charts, and necessary plugin for dashboard design

Each component is built with Bootstrap 5 classes and additional utility classes to make the layout responsive and flexible.

🧰 Prerequisites

To run the dashboard locally, you’ll need:

• A modern browser (Chrome, Firefox, Safari, Edge)
• Code editor (VS Code recommended)
• Local server (optional: Live Server extension in VS Code)

📦 Dependencies

• Bootstrap 5
• jQuery

You can find CDN links inside the index.html or locally in assets/.

❓Frequently Asked Questions (FAQs)

✅ Final Notes

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. We hope it makes your project powerful, fast, and easy to manage.

Don't forget to rate us ⭐⭐⭐⭐⭐ on ThemeForest if you like the template!