v2.0.0 — MIT License

Build interfaces faster with Vectra UI

A professional, accessible design system built on Bootstrap 5. Ships with 30+ components, dark & light themes, working scroll spy, animated counters, testimonial sliders, and more. Zero build tools required.

Browse Components Read the Docs

0 Components

0 Themes

MIT License

0 Build tools

Accessible

ARIA, focus rings & keyboard nav built in.

Themed

Dark & light via data-theme.

Bootstrap 5

Grid, modals, dropdowns — zero conflicts.

Responsive

Mobile-first from 320px up.

Overview

Everything you need, nothing you don't

A focused, no-bloat design system. Use the pieces you need — ignore the rest.

30+ Components

Cards, modals, tables, tabs, accordions, sliders, pricing cards, code blocks, and more — all styled to match.

Dark & Light Themes

Switch with a single data-theme attribute. Every component is tested in both modes.

CSS Custom Properties

Retheme in minutes by changing variables. Colours, radius, shadows, and transitions are all tokens.

Accessible Markup

ARIA roles, focus-visible rings, and keyboard navigation patterns applied consistently across components.

No Build Tools

Drop in two files and go. CDN-linked vendors mean zero npm, webpack, or compiler setup required.

MIT Licensed

Free for personal and commercial projects. Attribution appreciated but not required.

Components

A taste of what's included

Every component is production-ready and works out of the box.

Buttons

Badges

Default Success Warning Danger Info Neutral With dot Outline

Alerts

Default

System maintenance scheduled for tonight.

Success

Your profile has been updated.

Warning

Storage limit approaching.

Error

Something went wrong. Please try again.

Cards

Default Card

Gradient surface with lift on hover.

Glass Card

Frosted blur with translucency.

Accent Card

Teal gradient border and glow.

Outline Card

Minimal border-only style.

Modals

Progress

Design System85%

Accessibility92%

Performance78%

View All Components

Quick Start

Up and running in seconds

Copy the snippet, link your HTML, and you're ready to build. No npm, no bundler, no compilation step.

Add HTML boilerplate

Standard <!DOCTYPE html> with lang and data-theme.

Link Vectra CSS

After Bootstrap and Font Awesome.

Add Vectra JS

Before </body>, after Bootstrap bundle.

html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My App</title>

  <!-- Bootstrap CSS (required) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />

  <!-- Font Awesome (required for icons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />

  <!-- AOS (optional, for scroll animations) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />

  <!-- Vectra UI Kit -->
  <link rel="stylesheet" href="assets/css/vectra.css" />
</head>
<body>

  <!-- Your content here -->

  <!-- Bootstrap Bundle JS (required) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- AOS JS (optional) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

  <!-- Vectra UI Kit JS -->
  <script src="assets/js/vectra.js"></script>
</body>
</html>