Repository files navigation

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

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.

• ✨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.

Check out the live demo:AsteroAdmin Demo

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

You can install AsteroAdmin in three ways:

npm install asteroadmin

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

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

Add the following CDN links to your HTML file (replace1.0.5 with the desired version):

<!-- CSS --><linkhref="https://cdn.jsdelivr.net/npm/asteroadmin@1.0.5/dist/css/style.min.css"rel="stylesheet"><!-- JavaScript --><scriptsrc="https://cdn.jsdelivr.net/npm/asteroadmin@1.0.5/dist/js/main.min.js"type="module"></script>

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

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The development server will start athttp://localhost:1234

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

.├── 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

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

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

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

To create a new page:

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

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

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

• 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.

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

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.

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
• Addedbundlewatch script

Version 1.0.0 - March 13, 2025

• Initial release

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

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

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

AsteroDigital -https://asterodigital.com

Made with ❤️ by AsteroDigital