AsteroAdmin

A responsive open source admin dashboard and control panel built with Bootstrap 5 and Astro.

Overview

AsteroAdmin is a modern, responsive admin template designed to provide a solid foundation for your administrative interface needs. Built with the latest web technologies and best practices, it offers a clean, intuitive, and highly customizable user experience for building powerful dashboards, admin panels, and back-office applications.

Key Features

• ✨ Built with Astro - Modern static site generator for performance.
• 🎨 Bootstrap 5.3.3 - Latest version for a clean, professional look.
• 📱 Fully Responsive - Works perfectly on all devices and screen sizes.
• 🌙 Light/Dark Mode - Switch between light and dark themes easily.
• 🚀 Optimized Build System - Uses ESBuild, LightningCSS, PostCSS for fast builds.
• 📦 Modular Architecture - Well-organized SCSS, JS, and Astro components.
• 🔧 Highly Customizable - Easy to adapt via SCSS variables.
• 📊 Dashboard Components - Charts, tables, forms, and more included.
• ⚡ Performance Optimized - Fast loading times and smooth interactions.
• 🔄 Live Reload - Instant preview during development (npm run dev).
• 📚 Component Examples - Clear examples for UI elements.
• 🔒 Auth Page Designs - Ready-made login and signup page designs.
• 🌐 RTL Support - Works perfectly for right-to-left languages.
• 📁 Logical Folder Structure - Easy navigation for developers.
• 🧩 Extensive UI Components - Wide collection of pre-built elements.
• 📱 Offcanvas Navbar - Modern navigation for mobile and desktop.

Demo

Check out the live demo: AsteroAdmin Demo

Getting Started

Prerequisites

• Node.js (v18 or later recommended)
• npm or yarn package manager

Installation

You can install AsteroAdmin in three ways:

1. Using npm

npm install asteroadmin

After installation, you can import the CSS and JavaScript files in your project:

// Import CSS
import 'asteroadmin/dist/css/style.css'

// Import JavaScript (if needed)
import 'asteroadmin/dist/js/main.js'

2. Using CDN

Add the following CDN links to your HTML file (replace 1.0.5 with the desired version):

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/style.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/main.min.js" type="module"></script>

3. Clone the repository

git clone https://github.com/asterodigital/bootstrap-admin-template.git
cd bootstrap-admin-template

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The development server will start at http://localhost:1234

Build System

AsteroAdmin uses a custom-built, optimized build system that handles:

• SCSS compilation with source maps
• JavaScript bundling and minification
• Asset optimization
• Live reloading
• Production builds with optimizations

Available Scripts

Command	Description
npm run dev	Start development server with hot reloading
npm run build	Build optimized files for production
npm run css	Compile SCSS to CSS with vendor prefixes
npm run js	Bundle and optimize JavaScript files
npm run assets	Process and optimize static assets
npm run lint	Run code quality checks
npm run fixlint	Automatically fix linting issues
npm run format:html	Format HTML files using Prettier
npm run clean	Remove build artifacts
npm run watch	Watch files for changes
npm run serve	Serve the built files locally
npm run bundlewatch	Check bundle sizes against limits

Project Structure

.
├── config/             # Build and tool configurations (PostCSS, Rollup, etc.)
├── dist/               # Compiled files (generated by build process)
├── src/                # Source files
│   ├── assets/         # Static assets (images, fonts, data, etc.)
│   ├── html/           # Astro components, layouts, and pages (.astro files)
│   │   ├── components/ # Reusable UI components (Astro)
│   │   ├── layouts/    # Page layouts (Astro)
│   │   └── pages/      # Site pages (Astro)
│   ├── js/             # JavaScript source files
│   │   ├── components/ # JS for specific components
│   │   ├── layout/     # JS for layout features (dark mode, sidebar)
│   │   └── main.js     # Main JavaScript entry point
│   ├── scss/           # SCSS stylesheets
│   │   ├── base/       # Base styles (typography, reset)
│   │   ├── components/ # Component-specific styles
│   │   ├── core/       # Core mixins and utilities
│   │   ├── layout/     # Layout styles (header, sidebar, footer)
│   │   ├── pages/      # Page-specific styles
│   │   ├── utilities/  # Utility classes
│   │   ├── variables/  # SCSS variables (colors, fonts, config)
│   │   └── style.scss  # Main SCSS entry point
│   └── utils/          # Utility functions (JS)
├── tools/              # Build system scripts (.mjs files)
├── .browserslistrc     # Target browsers for CSS prefixes
├── .editorconfig       # Editor configuration
├── .gitignore          # Files ignored by Git
├── eslint.config.js    # ESLint configuration
├── index.html          # Redirect or simple landing page (if used)
├── LICENSE             # Project license (MIT)
├── package.json        # Project dependencies and scripts
├── pnpm-lock.yaml      # PNPM lock file (if using PNPM)
└── README.md           # This file

Customization

Themes

AsteroAdmin comes with both light and dark themes. You can customize the themes by modifying the variables in src/scss/variables/. The dark mode provides a sleek, eye-friendly experience that:

• Is easier on the eyes
• Improves readability
• Minimizes distractions
• Enhances visual appeal

Components

All UI components are modular and can be found in src/scss/components/ and src/scss/extra-components/. You can easily modify or extend these components to match your requirements.

Creating New Pages

To create a new page:

1. Create a new .astro file in the src/html/pages/ directory.
2. Use existing Astro components from src/html/components/ and layouts from src/html/layouts/.
3. Import necessary CSS and JS as needed.
4. Run npm run dev to see your changes live.

Dashboard Layouts

AsteroAdmin offers multiple dashboard layouts to suit different needs:

• Analytics Dashboard - For data visualization and metrics
• Compact Sidebar - Space-efficient navigation
• Dark Mode - Eye-friendly interface for low-light environments
• Various Components - Extensive UI element collection
• Offcanvas Navbar - Modern responsive navigation

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Technologies Used

• Astro (^5.5.5) - Static site generator for building fast websites.
• Bootstrap (^5.3.3) - Front-end component library.
• Sass (Embedded) (^1.86.0) - CSS preprocessor.
• ESBuild (^0.25.1) - JavaScript bundler and minifier.
• Rollup (^4.36.0) - JavaScript module bundler (used alongside ESBuild).
• LightningCSS (^1.29.3) - CSS parser, transformer, bundler, and minifier.
• PostCSS (^8.5.3) - Tool for transforming CSS with JavaScript plugins.
• SimpleBar (^6.3.0) - Custom scrollbar plugin.
• Prettier (^3.5.3) - Code formatter.
• ESLint (^9.23.0) - Code linter for JavaScript and Astro.
• Stylelint (^16.16.0) - CSS linter.

Performance Optimization

AsteroAdmin is optimized for performance:

• Minified CSS and JavaScript
• Optimized asset loading
• Efficient build process
• Code splitting where appropriate
• Vendor prefixing for cross-browser compatibility

Frequently Asked Questions

What is included in the theme?
The package includes a full set of templates, and documentation.

Is the theme mobile-friendly?
Absolutely, the theme is designed to be responsive across devices.

Can I customize the design?
Yes, the theme is fully customizable to match your branding needs.

How do I install the theme?
Installation is simple and comes with detailed instructions in the docs.

Change Log

Version 1.0.5 - April 3, 2025

• Updated dependencies (Bootstrap 5.3.3, Astro 5.5.5, etc.)
• Refreshed project structure in README
• Updated build tools and configurations
• Added bundlewatch script

Version 1.0.0 - March 13, 2025

• Initial release

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, please visit https://asterodigital.com/bootstrap-admin-template or create an issue in the GitHub repository.

Author

AsteroDigital - https://asterodigital.com

---

Made with ❤️ by AsteroDigital