Vectra UI Kit is a professional-grade, fully free component library and page kit built on Bootstrap 5. Originally developed as an internal design system, it has been fully open-sourced under the MIT licence — free for personal and commercial use, forever. Drop in the CDN links, open any page, and start building immediately.

✦ What's Included

11 Hand-crafted Pages — Landing showcase, Component catalog, Form library, Utility reference, Pricing, Section layouts, Documentation, Login, Register, Password Recovery, Profile settings
Dark & Light Theme System — One-click toggle with preference persisted to localStorage; every component adapts automatically
40+ CSS Design Tokens — Rebrand the entire kit by overriding a handful of --v-* CSS custom properties
30+ Components — Cards, buttons, badges, alerts, modals, tabs, accordion, tables, progress bars, timeline, steps, spinners, pagination, breadcrumbs, pricing cards, testimonial slider, stat counters, code blocks with copy, FAB, offcanvas, and more
Complete Form Library — Every HTML input type, floating labels, input groups, password show/hide, checkboxes, radios, switches, range sliders, and full validation states
4 Auth Page Templates — Login, Register, Password Recovery (with animated confirmation state), and a full tabbed Profile settings dashboard
Professional Documentation — Sticky-sidebar docs page covering quick start, design tokens, theming, JS API, data attributes, auth pages, accessibility, and customisation
Utility Class Reference — Live swatches for colours, flex, borders, shadows, sizing, display helpers, dividers, and labels
GDPR Cookie Banner — Accept/decline with localStorage persistence
Well-commented Code — Clean, readable, and easy to extend

📄 Pages

index.html — Hero, Features, Stats, Components showcase, Testimonials, Pricing, CTA, Footer
components.html — Full catalog of all 30+ UI components with live examples
forms.html — Complete form element reference with all input types and validation states
utilities.html — Utility class reference with live colour swatches, spacing, and layout helpers
pricing.html — Pricing tiers with toggle and feature comparison
sections.html — Prebuilt section layouts ready to drop into any page
docs.html — Full documentation with sticky sidebar navigation
auth/login.html — Email/password sign-in with social buttons and remember-me
auth/register.html — Full registration form with confirmation password and terms checkbox
auth/recover.html — Two-state password recovery with animated sent-confirmation
auth/profile.html — Tabbed settings: Personal Info, Security (password + 2FA), Notifications, Billing

⚙️ Built With

Bootstrap 5.3.3
Font Awesome 6.6.0
AOS.js 2.3.4 (scroll animations)
Google Fonts — Inter + JetBrains Mono
Vanilla JavaScript (ES6+) — no jQuery
All dependencies loaded via CDN — no npm or build step required

🎨 Easy Customisation

The entire colour scheme, typography, spacing, radius, and shadows are controlled by CSS custom properties at the top of vectra.css. Change your accent colour in one place and it updates buttons, badges, links, focus rings, and highlights everywhere:

:root {
  --v-accent:      #7c3aed;   /* change this → updates everything */
  --v-accent-2:    #a78bfa;
  --v-accent-rgb:  124, 58, 237;
  --v-accent-soft: rgba(124, 58, 237, .1);
}

🛠️ JavaScript Engine

The included vectra.js (~450 lines) initialises everything automatically on DOMContentLoaded and exposes a global window.Vectra object for programmatic control. Features include:

IntersectionObserver scroll spy — accurate active-link tracking for both top navbar and sidebar, with no layout-breaking offset hacks
Anchor-safe navigation — scroll-margin-top: var(--v-navbar-h) globally applied so deep links never hide under the fixed navbar
Touch & swipe slider — with dot navigation and optional autoplay
Animated number counters — triggered on viewport entry via IntersectionObserver
Clipboard copy buttons — on all code blocks
Password show/hide toggle — wired via data-pw-toggle attribute
Drag-and-drop file upload — on .v-drop-zone elements
Cookie banner — with accept/decline, persisted to localStorage

♿ Accessibility

Visible focus rings on all interactive elements
aria-label on all icon-only controls and navigation landmarks
All transitions and animations disabled under prefers-reduced-motion: reduce
WCAG AA colour contrast in both dark and light themes
Correct semantic landmarks —
,
,
,

📋 Licence

MIT Licence — free for personal and commercial use, forever. No attribution required.

Perfect For

SaaS dashboards, admin panels, portfolio sites, startup landing pages, design system prototyping, or any project that needs a sharp, professional UI without a build pipeline.

Version

v1.1.0 (10.03.2026)
Full professional rebuild — IntersectionObserver scroll spy, working dark/light themes, 30+ components, 4 auth page templates, full documentation, cookie banner, touch slider, animated counters, drag-and-drop upload, FAB, MIT licence.

v1.0 — Original release.

Digital Templates & Starter Kits

No products found