StarAdmin#
StarAdmin is a clean and minimalist Bootstrap admin template that focuses on simplicity and usability. The template distinguishes itself through its crisp design, straightforward layout structure, and efficient use of white space.
π StarAdmin - Product page
Itβs particularly well-suited for projects that require a clean, professional interface without overwhelming visual elements.
π New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
Project Information#
Star Admin Free is an admin dashboard template built on Bootstrap 5, featuring a light theme with predominantly blue elements that enhance readability and provide a professional appearance.
It includes a default admin dashboard layout, various UI elements such as buttons, dropdowns, and typography, and offers multiple form elements, charts, tables, icons, and user pages.
This comprehensive solution for admin dashboard is customizable under the MIT license, allowing users to create a unique interface.
Project Architecture#
The template follows a well-organized structure:
staradmin/
βββ dist/ # Production-ready files
βββ src/
β βββ assets/
β β βββ css/
β β β βββ style.css
β β β βββ vendor.css
β β βββ fonts/
β β βββ images/
β β βββ js/
β β β βββ off-canvas.js
β β β βββ hoverable-collapse.js
β β β βββ misc.js
β β β βββ dashboard.js
β β βββ scss/
β β βββ components/
β β βββ mixins/
β β βββ vendor/
β β βββ style.scss
β βββ pages/
β βββ partials/
βββ gulp-tasks/
βββ documentation/
βββ package.json
Component System#
Cards and Widgets#
StarAdmin provides clean, minimal card designs:
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic Card</h4>
<p class="card-description">Basic card content</p>
<div class="card-stats">
<div class="d-flex justify-content-between align-items-center">
<div class="statistics">
<p class="statistics-title">Bounce Rate</p>
<h3 class="rate-percentage">32.53%</h3>
<p class="text-danger d-flex">
<i class="mdi mdi-menu-down"></i>
<span>-0.5%</span>
</p>
</div>
<div class="icon-statistics">
<i class="mdi mdi-chart-line"></i>
</div>
</div>
</div>
</div>
</div>
Chart Integration#
StarAdmin integrates smoothly with Chart.js:
// Line chart configuration
const lineChartConfig = {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [{
label: 'Revenue',
data: [10, 19, 3, 5, 2, 3],
borderColor: '#464dee',
backgroundColor: 'rgba(70, 77, 238, 0.1)',
borderWidth: 2,
fill: true
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: false
},
elements: {
point: {
radius: 0
}
}
}
};
// Initialize chart
new Chart(document.getElementById('lineChart'), lineChartConfig);
Support Resources#
Documentation: Available in the package
Support Email: Listed in the documentation
Updates: Through npm
Community: GitHub issues and discussions
Links#
π New to App-Generator? Join our 10k+ Community using GitHub One-Click SignIN.
π
Download
products and start fast a new projectπ Bootstrap your startUp, MVP or Legacy project with a custom development sprint