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