# AsteroAdmin

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

[![AsteroAdmin Dashboard](https://raw.githubusercontent.com/asterodigital/bootstrap-admin-template/main/.github/images/feature-image.png)](https://astero-admin.asterodigital.com/pages/dashboard)

<!-- Product Hunt badge - Verify post_id if necessary -->
<a href="https://www.producthunt.com/posts/astero-admin?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-astero&#0045;admin" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=941743&theme=light" alt="Astero&#0032;Admin - Free&#0032;Bootstrap&#0032;5&#0032;Admin&#0032;Template | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

## 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](https://astero-admin.asterodigital.com/pages/dashboard)

## 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

```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
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/asteroadmin@1.0.5/dist/css/style.min.css" rel="stylesheet">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/asteroadmin@1.0.5/dist/js/main.min.js" type="module"></script>
```

#### 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

### 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

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

### 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](LICENSE) file for details.

## Support

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

## Author

AsteroDigital - [https://asterodigital.com](https://asterodigital.com)

---

Made with ❤️ by AsteroDigital
