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 [email protected] 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)