Dashio is a free, open-source admin dashboard template built with Bootstrap 5.3 and Vite 7. It provides a clean, modern foundation for building web applications, admin panels, SaaS products, and internal tools.
- Modern Stack - Built with Vite 7 for lightning-fast development and Bootstrap 5.3 for a solid CSS foundation
- 7 Dashboard Variants - Pre-built dashboards for Analytics, E-commerce, CRM, Projects, SaaS, and Finance use cases
- 21 Ready-to-Use Pages - Everything you need to get started: authentication, settings, tables, forms, charts, and more
- Dark/Light Mode - Native Bootstrap dark mode with system preference detection
- Runtime Color Switcher - Change the primary color on-the-fly without rebuilding
- Responsive Design - Mobile-first approach that works on all screen sizes
- No jQuery - Pure vanilla JavaScript with ES modules
- Well Organized - Clean code structure that's easy to understand and extend
npm install
npm run devOpens at http://localhost:3000
npm run build # Output to dist/
npm run preview # Preview production build- Vite 7 - Build tool with hot module replacement
- Bootstrap 5.3 - CSS framework with native dark mode
- Bootstrap Icons 1.13 - 2,000+ icons
- Chart.js 4 - Charts and graphs
- Sass - CSS preprocessor
| Category | Pages |
|---|---|
| Dashboards | Main, Analytics, E-commerce, CRM, Projects, SaaS, Finance |
| Core | Tables, Forms, Charts |
| Auth | Login, Register, Forgot Password |
| Account | Profile, Settings |
| Apps | Notifications, Calendar, Kanban |
| Utility | Pricing, 404 Error, 500 Error |
src/
├── index.html # Main Dashboard
├── pages/ # All other pages
│ ├── dashboard-*.html # Dashboard variants
│ ├── tables.html # Data tables
│ ├── forms.html # Form elements
│ ├── charts.html # Chart examples
│ └── ... # Other pages
├── js/
│ ├── main.js # App initialization, theme, color switcher
│ └── charts.js # Chart.js configuration
└── scss/
├── _variables.scss # Bootstrap variable overrides
└── styles.scss # Main styles
Toggle via the moon/sun icon in the header. Automatically detects system preference and saves choice to localStorage.
Click the palette icon to change the primary color. All primary-colored elements update instantly including buttons, links, form elements, charts, and sidebar.
Disable for production: In vite.config.js, set:
define: {
__DASHIO_DEMO__: false
}This hides the color picker UI. Any previously saved color still applies.
Six chart types are configured in src/js/charts.js:
- Line, Bar, Area (with axes)
- Doughnut, Pie, Polar Area
Charts automatically adapt to theme changes and color switcher selections.
Edit src/scss/_variables.scss:
$primary: #4f46e5;
$success: #10b981;
$danger: #ef4444;- Create HTML file in
src/pages/ - Add entry to
vite.config.js:
rollupOptions: {
input: {
// ...existing entries
myPage: resolve(root, 'pages/my-page.html')
}
}- Add navigation link to sidebar in your HTML
The sidebar uses Bootstrap nav classes. Active page is marked with .active:
<a class="nav-link active" href="/pages/tables.html">
<i class="bi bi-table"></i>
<span>Tables</span>
</a>Node.js 20.19+ or 22.12+
Looking for more options? Check out these templates from DashboardPack:
- ArchitectUI HTML Dashboard Free - Bootstrap 5 admin template
- ArchitectUI React Dashboard Free - React 19 admin dashboard
- ArchitectUI Vue Dashboard Free - Vue.js admin template
- ArchitectUI Angular Dashboard Free - Angular 20 admin dashboard
- ArchitectUI Dashboard HTML PRO - Full-featured Bootstrap admin
- TailPanel - Tailwind CSS admin dashboard
- Finance SaaS Dashboard - Financial application template
- Analytic Dashboard - Data analytics template
Browse all templates at dashboardpack.com
This project is licensed under the MIT License.
You are free to:
- Use commercially - Use in any commercial project
- Modify - Adapt, remix, and build upon the template
- Distribute - Share copies with others
- Use privately - Use for personal projects
The only requirement is to include the original copyright notice in any copy of the software.
