Concept - Bootstrap 5 Admin Dashboard

A modern, responsive admin dashboard template built with Bootstrap 5, featuring a clean design and comprehensive functionality for web applications.

Concept Bootstrap 5 Admin Dashboard

🌟 Live Demo

Experience the full power of Concept dashboard:

View Live Demo →

Explore all features, pages, and components in action. Perfect for evaluating the template before implementation.

Overview

Concept is a modern admin template built from the ground up with Bootstrap 5.3.8, Vite 7.3, and ES6 modules. This jQuery-free dashboard provides a solid foundation for building admin panels, analytics dashboards, and management systems.

Features

Core Technologies

Bootstrap 5.3.8 - Latest Bootstrap framework with modern components
Vite 7.3 - Next-generation frontend tooling with lightning-fast HMR and CSS code-splitting
Handlebars - Template engine with reusable partials
SCSS - Advanced styling with variables and mixins
ES6 Modules - Modern JavaScript architecture
jQuery-free - Pure vanilla JavaScript implementation

Dashboard Pages

E-commerce Dashboard - Main dashboard with revenue cards, charts, and recent orders
Finance Dashboard - Financial metrics, transaction charts, and portfolio overview
Sales Dashboard - Sales funnel, team performance, and revenue analytics
Influencer Dashboard - Social media metrics, engagement tracking, and campaign performance

UI Components

Cards - Various card layouts with images, colors, borders, and lists
Typography - Complete typography showcase with Bootstrap 5 utilities
Forms - Form elements, validation, and multiselect components
Charts - Chart.js integration with line, bar, pie, and doughnut charts
Tables - Basic tables and DataTables integration with sorting/filtering

Applications

Calendar - Full-featured calendar with FullCalendar integration
User Management - User list with DataTables, filters, and bulk actions
Timeline - Activity feed with filters and real-time updates
Settings - Comprehensive settings page with multiple sections

Additional Pages

404 Error Page - Modern error page with helpful navigation
Blank Page Template - Starting point for custom pages

Premium Dashboard Collection

Building something bigger? These premium admin templates from DashboardPack deliver pixel-perfect designs, extensive page libraries, and long-term support.

<table> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=concept"> <img src="screenshots/tailpanel.png" alt="TailPanel — sleek React admin panel styled with Tailwind CSS" width="100%"> </a> <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=concept">TailPanel</a> React + TypeScript + Tailwind CSS. 9 dashboards, dark/light mode, Vite HMR. </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=concept"> <img src="screenshots/admindek.png" alt="Admindek — robust Bootstrap 5 dashboard with real-time analytics" width="100%"> </a> <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=concept">Admindek</a> Bootstrap 5 + vanilla JS. 100+ components, dual themes, RTL language support. </td> </tr> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=concept"> <img src="screenshots/adminty.png" alt="Adminty — enterprise admin template with 160+ application pages" width="100%"> </a> <a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=concept">Adminty</a> Bootstrap 5. 160+ pages spanning dashboards, apps, forms, tables, and charts. </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=concept"> <img src="screenshots/architectui.png" alt="ArchitectUI — component-rich admin dashboard with 9 layout options" width="100%"> </a> <a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=concept">ArchitectUI</a> Bootstrap 5. 250+ unified components, 9 dashboards, easy to extend and customize. </td> </tr> <tr> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=concept"> <img src="screenshots/kero.png" alt="Kero — flexible admin panel with switchable navigation modes" width="100%"> </a> <a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=concept">Kero</a> Bootstrap 5 + Webpack. Horizontal or sidebar navigation, full SASS customization. </td> <td align="center" width="50%"> <a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=concept"> <img src="screenshots/cryptocurrency.png" alt="Cryptocurrency Dashboard — crypto portfolio and ICO management panel" width="100%"> </a> <a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=concept">Cryptocurrency Dashboard</a> Bootstrap. Optimized for ICO dashboards, token sales, and crypto asset tracking. </td> </tr> </table> <a href="https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=concept">Discover All Premium Templates</a>

Installation

Prerequisites

Node.js 16.x or higher
npm 8.x or higher

Setup Instructions

Clone or download the repository:

git clone https://github.com/puikinsh/concept.git
cd concept

Install dependencies:

npm install

Start the development server:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

Code Quality Scripts

# Lint JavaScript files
npm run lint        # Auto-fix issues
npm run lint:check  # Check only

# Format code with Prettier
npm run format       # Auto-format files
npm run format:check # Check formatting

Project Structure

concept/
├── src/
│   ├── assets/          # Static assets (images, fonts)
│   ├── js/              # JavaScript modules
│   │   ├── components/  # Reusable components
│   │   └── pages/       # Page-specific scripts
│   ├── pages/           # HTML pages
│   │   ├── dashboards/  # Dashboard pages
│   │   ├── ui-elements/ # UI component pages
│   │   └── misc/        # Miscellaneous pages
│   ├── partials/        # Handlebars partials
│   │   └── layouts/     # Layout components
│   ├── scss/            # SCSS styles
│   │   ├── components/  # Component styles
│   │   ├── layouts/     # Layout styles
│   │   └── pages/       # Page-specific styles
│   └── index.html       # Main entry point
├── dist/                # Production build output
├── docs/                # Documentation
├── scripts/             # Build and utility scripts
├── package.json         # Project dependencies
└── vite.config.js       # Vite configuration

Key Dependencies

Core

bootstrap@5.3.8 - UI framework
@fortawesome/fontawesome-free@7.2.0 - Icon library
vite@7.3.1 - Build tool
sass@1.97.3 - CSS preprocessor

JavaScript Libraries

chart.js@4.5.1 - Charts and graphs
datatables.net-bs5@2.3.7 - Advanced tables
@fullcalendar/core@6.1.20 - Calendar functionality
tom-select@2.5.2 - Enhanced select boxes

Build Tools

vite-plugin-handlebars@2.0.0 - Handlebars support
eslint@10.0.2 - Code linting with Prettier integration

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Chrome Mobile (latest)
Safari Mobile (latest)

Development Guidelines

Adding a New Page

Create the HTML file in src/pages/
Add the page to vite.config.js in the rollupOptions.input section
Create corresponding JavaScript in src/js/pages/
Create SCSS file in src/scss/pages/ and import in main.scss
Update sidebar navigation in src/partials/layouts/sidebar.hbs

Component Structure

JavaScript modules follow this pattern:

export function initializeComponent() {
    // Component logic
}

// Auto-initialize on DOM ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeComponent);
} else {
    initializeComponent();
}

SCSS Organization

Use Bootstrap variables for consistency
Follow BEM naming convention where applicable
Keep component styles modular
Use mixins for repeated patterns

Performance Optimization

Vite's JS and CSS code-splitting for optimal per-page loading
Lazy loading for heavy components
Optimized images and assets
ES6 modules for tree shaking
No legacy browser polyfil

Concept

Install / Use

README