Project Overview
Urbix is a Bootstrap 5-based admin dashboard template featuring 60+ pre-built pages covering e-commerce management, school management, email, chat, kanban, and various business scenarios. It includes a built-in webpack build process, supports SCSS customization and Handlebars template engine, making it suitable for quickly building back-office systems.
Tech Stack
- Bootstrap 5.3.5
- Webpack 5
- SCSS
- Handlebars (partial template engine)
- Chart.js / ApexCharts / ECharts (charts)
- Swiper, Quill, FullCalendar, Grid.js and other UI component libraries
Project Structure
Urbix_HTML_v1.0.0/
├── Admin/
│ ├── src/ # Page source files
│ │ ├── index.html # Main dashboard
│ │ ├── dashboard-*.html # Module dashboards
│ │ ├── apps-*.html # Feature module pages
│ │ ├── auth-*.html # Authentication pages
│ │ ├── ui-*.html # UI components
│ │ ├── chart-*.html # Chart examples
│ │ └── pages-*.html # General pages
│ ├── package.json # Dependency configuration
│ └── webpack.config.js # Build configuration
├── Documentation.html # Documentation entry (redirect link)
└── THEMELOCK.COM.url
Key File Descriptions
Admin/package.json— Declares npm scripts (dev/build/clean) and all dependenciesAdmin/webpack.config.js— Webpack build configuration handling HTML compilation and asset copyingAdmin/src/index.html— E-Commerce dashboard homepage featuring cards, charts, and sales data displayAdmin/src/pages-starter.html— Blank page template showing basic page layout structureAdmin/src/dashboard-*.html— Business-specific dashboards (Analytics, School, Media)Admin/src/apps-*.html— Specific business function pages (e-commerce orders, products, student management, chat, etc.)
Quick Start
cd Urbix_HTML_v1.0.0/Admin
npm install
npm run dev
After starting in development mode, visit http://localhost:3000 with hot reload enabled. For production build, run npm run build.
Usage Tips
The template uses Handlebars partials to organize common sections (header, sidebar, footer). Modify files under src/partials/ to batch update global layouts. For theming or color adjustments, modify the variable files in src/assets/scss/.
