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

$3

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

$3

You can install AsteroAdmin in three ways:

#### 1. Using npm

``bash
npm install asteroadmin
`

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

`javascript
// 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):

`html





`

#### 3. Clone the repository

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

2. Install dependencies:

`bash
npm install
`

3. Start the development server:

`bash
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

$3

| 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

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

$3

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

$3

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.

$3

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