Subar - Bootstrap 5 Admin & Dashboard Template

Subar – Bootstrap 5 Admin & Dashboard Template

Subar is a modern, clean, and fully responsive admin dashboard template built for SaaS products, internal tools, back offices, e-commerce management, CRM systems, and analytics applications. It gives you everything you need to start a project: a polished dashboard, user and commerce management, apps such as a calendar, kanban board and chat, charts, forms, data tables, a complete UI library, and every authentication and error page.

Built with HTML5, CSS3, Bootstrap 5.3, SCSS and plain vanilla JavaScript, Subar has no jQuery and no build step. Open any page in your browser and start editing. It opens in light mode, with a one-click dark mode, a compact density option, and six accent colours that apply to every page.

Whether you are building a SaaS control panel, an e-commerce back office, a CRM, or a reporting dashboard, Subar gives you a professional, accessible and easy-to-customize foundation.

Template Features

Layout & Pages

• Based on Bootstrap 5.3 with a custom design system built on CSS variables.
• 48 valid HTML5 pages – dashboards, users, commerce, apps, forms, tables, charts, UI elements, authentication, error and status pages.
• Responsive sidebar: full sidebar on desktop, icon rail with fly-out menus on laptops, and an off-canvas drawer on phones. The collapsed state is remembered.
• Sticky topbar with search (Ctrl/Cmd + K), quick actions, notifications, theme switch and user menu.
• Page header with breadcrumb and action area on every page.
• Tables that stack into cards on small screens, and modals, dropdowns and forms checked from 360px up to large desktops.
• Print-ready invoice page.

Design & Customization

• Light mode by default, dark mode switch, and a theme setting that follows the visitor’s choice.
• Density option (comfortable / compact) and six accent colour presets checked for AA contrast, switchable site-wide from the Settings page or with one line of JavaScript.
• Complete SCSS source files included (assets/scss/), organised into abstracts, base, components, layout and pages, with a numbered INDEX in main.scss and in the compiled CSS.
• All colours, radii, shadows and fonts are CSS variables in _tokens.scss for light and dark mode.
• Consistent tc- class prefix and data-tc-* hooks, so the theme never collides with other libraries.
• Well-commented HTML: every page section is wrapped in start / end comments, and every JavaScript file starts with a numbered index.
• Free, self-hosted fonts (Inter and Bricolage Grotesque) and Font Awesome Free icons. No remote requests.
• Logo and favicon as vector SVG, plus a large logo file for presentations.

Interaction & Components

• Data tables with sorting, search, filters, paging, row selection, bulk actions and CSV export – added with a single attribute and still working as a normal table without JavaScript.
• Calendar with month, week and day views, add / edit / delete events and keyboard navigation.
• Kanban task board with drag and drop, keyboard moves, filters and saved state.
• Chat layout with conversations, attachments and a composer.
• Charts built with Chart.js that re-colour automatically when the theme changes.
• Forms: validation helper with error summary, advanced controls (combobox, tag input, input masks, date range picker, time picker, two-thumb range, sortable list, rich text), and drag and drop file upload.
• UI library: buttons, cards, alerts, toasts, modals, offcanvas, tabs, accordions, dropdowns, badges, progress, spinners, typography, empty / loading / error states.
• Notification centre, settings page with appearance options, roles and permissions matrix, invoice and customer views.
• Toast API (TC.toast()) and small helper API for theme, density, accent and tables.

Code Quality & Support

• Valid HTML5 markup (checked with the W3C Nu validator).
• Accessible: semantic landmarks, skip link, labelled controls, keyboard operable menus and widgets, visible focus, reduced-motion support and AA text contrast in both themes.
• Vanilla JavaScript only (no jQuery, no framework) and a single global, window.TC.
• Cross-browser compatible with current Chrome, Edge, Firefox and Safari.
• Comprehensive documentation included (subar-documentation/).
• Friendly customer support via ThemeForest and email.

There are 48 HTML files included with this template. All files are fully responsive and easily customizable – open any HTML file, find the section by its start / end comment (for example revenue chart or transactions), update the content, and save.

Key Sections Included

• Dashboard – Welcome card with monthly goal, quick actions, KPI stat cards, revenue chart, recent activity, recent transactions, top products, tasks and sales by channel.
• Analytics – Date range control, KPI cards with sparklines, traffic chart, sources, top pages, devices, cohort retention heatmap, funnel, goals and live “active now” panel.
• Users – User list with filters and bulk actions, profile, add user wizard, edit user, roles and permissions matrix.
• Commerce – Products (grid and table), orders with detail drawer, customers with detail panel, invoices and a printable invoice.
• Apps – Calendar, kanban tasks, chat and notification centre.
• Forms – Basic, advanced, validation and file upload examples.
• Tables & Charts – Table styles and a full data table, plus a gallery of chart types.
• UI Elements – Buttons, cards, alerts, modals, tabs, accordions, dropdowns, badges, progress, typography, states and toasts.
• Authentication – Sign in, register, forgot password, reset password and verification code pages.
• Error & Status – 403, 404, 405, 500, 503, offline, coming soon and maintenance pages.
• Settings – Profile, account, security, notifications, appearance (theme, density, accent), billing, integrations and danger zone.

Included Pages

• index.html – Sign in page with brand panel.
• dashboard.html – Main dashboard.
• analytics.html – Analytics dashboard with interactive range and series toggles.
• users-list.html – Searchable, sortable and filterable users table with bulk actions.
• profile.html – User profile with tabs, activity and security.
• user-add.html – Three-step add user wizard with validation.
• user-edit.html – Edit user form with unsaved-changes indicator.
• roles-permissions.html – Roles list and accessible permissions matrix.
• products.html – Product management with grid / table toggle and add product modal.
• orders.html – Orders table with status tabs and order detail drawer.
• customers.html – Customers list with segment filters and detail panel.
• invoices.html – Invoices table with status filters and summary cards.
• invoice.html – Printable invoice with mark-as-paid action.
• calendar.html – Month, week and day calendar with event modal.
• tasks.html – Kanban board with drag and drop and keyboard moves.
• chat.html – Three-pane messaging interface.
• notifications.html – Notification centre with tabs, filters and settings.
• forms.html – Basic form controls and layouts.
• forms-advanced.html – Advanced widgets: combobox, tags, masks, date range, time, wizard and more.
• forms-validation.html – Validation patterns, error summary and live rules.
• forms-upload.html – Drag and drop uploads, previews and queue.
• tables.html – Table styles, stacked mobile layout and expandable rows.
• data-table.html – Data table with search, sort, paging, selection, column visibility and CSV export.
• charts.html – Chart gallery (line, area, bar, doughnut, radar, scatter and more).
• buttons.html – Button styles, sizes, groups and states.
• ui-cards.html, ui-alerts.html, ui-modals.html, ui-tabs.html, ui-accordions.html, ui-dropdowns.html, ui-badges.html, ui-progress.html, ui-states.html and typo.html – UI element pages with live examples.
• settings.html – Settings centre with appearance, security, billing and integrations.
• register.html, forgot-password.html, reset-password.html, verification.html - Authentication flow pages.
• 403.html, 404.html, 405.html, 500.html, 503.html, offline.html – Error and status pages.
• coming-soon.html and maintenance.html - Launch countdown and maintenance status pages.

Included with your purchase:

• Complete HTML Template Files
• SCSS Source Files
• Comprehensive Documentation

Notes

Please note this item is an HTML5 template only. It is not a PSD file, a WordPress theme, or a framework-specific package, and it contains front-end code only (no server-side scripts). All names, companies, email addresses and figures in the demo content are fictional. The template contains no photographs: avatars are initials and illustrations are original inline SVG.

The template works when you open the HTML files directly, and we recommend a local server (Live Server, Laravel Herd, XAMPP, MAMP) for development. A Sass compiler is only needed if you change the SCSS source.

Support

If you need any help using this template or require special customization, please feel free to contact us at nafiulpust@gmail.com or through ThemeForest. If you enjoy this template, please take a moment to rate it – your support means a lot to us! Thank you.

Fonts Used

The fonts below are included in the download (assets/fonts/), so you do not need to install them.

• Inter (SIL Open Font License)
• Bricolage Grotesque (SIL Open Font License)

Image Sources

The template uses no photographs. Avatars are initials, and the logo, charts, icons and illustrations are original artwork built in HTML / CSS / SVG.

Plugins & Libraries

• Bootstrap 5.3 (MIT, includes Popper)
• Chart.js (MIT)
• Font Awesome Free (Free License)