Components — Vectra UI Kit

Cards

Four card variants. All support hover lift, focus rings, and work in both themes.

Default

Gradient surface, lift on hover.

Glass

Frosted translucent backdrop.

Accent

Teal glow & gradient border.

Outline

Transparent, border only.

html

<div class="v-card">Default card content</div>
<div class="v-card v-card-glass">Glass card</div>
<div class="v-card v-card-accent">Accent card</div>
<div class="v-card v-card-outline">Outline card</div>

Buttons

Variants: primary, gradient, outline, soft, ghost, neutral, and danger. Three sizes available.

html

<button class="v-btn v-btn-primary">Primary</button>
<button class="v-btn v-btn-gradient">Gradient</button>
<button class="v-btn v-btn-outline">Outline</button>
<button class="v-btn v-btn-soft">Soft</button>
<button class="v-btn v-btn-ghost">Ghost</button>
<button class="v-btn v-btn-neutral">Neutral</button>
<button class="v-btn v-btn-danger">Danger</button>
<!-- Sizes: v-btn-sm | (default) | v-btn-lg | v-btn-xl -->

Badges

Small status indicators with semantic colour variants and optional leading dot.

Default Success Warning Danger Info Neutral Outline With dot Online

html

<span class="v-badge">Default</span>
<span class="v-badge v-badge-success">Success</span>
<span class="v-badge v-badge-warning">Warning</span>
<span class="v-badge v-badge-danger">Danger</span>
<span class="v-badge v-badge-info">Info</span>
<span class="v-badge v-badge-dot">With dot</span>

Alerts

Left-bordered notification banners with icon, title and body text.

Default

System update available.

Success

Profile saved successfully.

Warning

Storage nearing limit.

Error

An error occurred.

html

<div class="v-alert v-alert-success">
  <i class="fa-solid fa-circle-check v-alert-icon"></i>
  <div>
    <div class="v-alert-title">Success</div>
    <div class="v-alert-body">Your changes were saved.</div>
  </div>
</div>

Modals

Bootstrap 5 modals with Vectra styling. Works in dark and light themes. Uses data-bs-toggle — no extra JS needed.

html

<!-- Trigger -->
<button class="v-btn v-btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#myModal">Open</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Title</h5>
        <button type="button" class="btn-close"
                data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">Your content here.</div>
      <div class="modal-footer">
        <button class="v-btn v-btn-neutral v-btn-sm"
                data-bs-dismiss="modal">Close</button>
        <button class="v-btn v-btn-primary v-btn-sm">Save</button>
      </div>
    </div>
  </div>
</div>

Tabs

Standard underline tabs and pill tabs. Driven by Bootstrap's tab plugin.

Design your components using CSS custom properties. Each token maps to a semantic concept.

Inspect generated HTML and override variables to match your brand palette.

Live preview renders in the viewport with real-time theme switching support.

Showing all items (15 total).

7 active items.

8 archived items.

html

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab"
            data-bs-target="#tab1" type="button" role="tab">Tab 1</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel">Content</div>
</div>

<!-- Pill variant -->
<ul class="nav nav-pills" role="tablist"> ... </ul>

Accordion

Bootstrap accordion with Vectra card styling. Use accordion-flush for a bordered variant.

Vectra UI Kit is a free, open-source design system built on top of Bootstrap 5. It provides styled components, utilities, and dark/light theme support.

No. Vectra works entirely via CDN-linked CSS and JS files. Just link the stylesheet and script — no npm, webpack, or compilation required.

Yes. Vectra UI Kit is MIT licensed. You can use it freely in personal and commercial projects.

html

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button"
              data-bs-toggle="collapse"
              data-bs-target="#item1">Title</button>
    </h2>
    <div id="item1" class="accordion-collapse collapse show"
         data-bs-parent="#myAccordion">
      <div class="accordion-body">Content here.</div>
    </div>
  </div>
</div>

Tables

Responsive table with uppercase headers, row hover, and optional status badges.

Name	Role	Status	Joined
Alice Johnson	Designer	Active	Jan 2024
Bob Williams	Developer	Active	Mar 2024
Carol Davis	Manager	Pending	Jun 2024
David Brown	Analyst	Inactive	Sep 2023

html

<div class="v-table-wrap">
  <table class="v-table">
    <thead>
      <tr><th>Name</th><th>Role</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice Johnson</td>
        <td>Designer</td>
        <td><span class="v-badge v-badge-success v-badge-dot">Active</span></td>
      </tr>
    </tbody>
  </table>
</div>

Progress

Progress Bars

Semantic colour variants and three height sizes.

Default progress72%

Success90%

Warning55%

Danger (large)40%

Small bar85%

html

<div class="v-progress-wrap">
  <div class="v-progress-label"><span>Label</span><span>72%</span></div>
  <div class="v-progress">
    <div class="v-progress-bar" style="width:72%"></div>
  </div>
</div>
<!-- Colour variants: v-progress-bar-success | v-progress-bar-warning | v-progress-bar-danger -->
<!-- Size variants:   v-progress-sm | (default) | v-progress-lg -->

Spinners

Spinners & Loaders

Ring spinner in three sizes and a bouncing dots variant.

Small

Default

Large

Dots

html

<div class="v-spinner"></div>
<div class="v-spinner v-spinner-sm"></div>
<div class="v-spinner v-spinner-lg"></div>
<div class="v-dots-spinner"><span></span><span></span><span></span></div>

Pagination

Page navigation with active, hover, and disabled states.

html

<nav class="v-pagination" aria-label="Page navigation">
  <a href="#" aria-label="Previous"><i class="fa-solid fa-chevron-left"></i></a>
  <a href="#">1</a>
  <span class="active" aria-current="page">2</span>
  <a href="#">3</a>
  <span class="disabled" aria-disabled="true">…</span>
  <a href="#" aria-label="Next"><i class="fa-solid fa-chevron-right"></i></a>
</nav>

Breadcrumbs

Hierarchical navigation trail with separator.

html

<nav class="v-breadcrumb" aria-label="Breadcrumb">
  <a href="/">Home</a>
  <span class="sep" aria-hidden="true">/</span>
  <a href="/components">Components</a>
  <span class="sep" aria-hidden="true">/</span>
  <span class="current" aria-current="page">Current Page</span>
</nav>

Timeline

Vertical event timeline with accent-coloured connector and dot markers.

January 2024

Project Kickoff

Initial planning and design tokens defined.

March 2024

v1.0 Released

First stable release with 20 components and dark theme.

January 2025

v2.0 — Pro Edition

Full rebuild. Working scroll spy, 30+ components, light theme.

html

<div class="v-timeline">
  <div class="v-timeline-item">
    <div class="v-timeline-dot"></div>
    <div class="v-timeline-date">January 2024</div>
    <div class="v-timeline-card">
      <h6>Event Title</h6>
      <p>Event description.</p>
    </div>
  </div>
</div>

Steps

Auto-numbered step cards. Mark steps active or done.

Install

Add CSS and JS files to your project.

Configure

Override design tokens to match your brand.

Build

Start using components in your layouts.

Deploy

Ship to production. Zero runtime deps.

html

<div class="v-steps">
  <div class="v-step done">
    <div class="v-step-title">Install</div>
    <div class="v-step-desc">Add CSS and JS files to your project.</div>
  </div>
  <div class="v-step active">
    <div class="v-step-title">Configure</div>
    <div class="v-step-desc">Override design tokens to match your brand.</div>
  </div>
  <div class="v-step">
    <div class="v-step-title">Build</div>
    <div class="v-step-desc">Use components in your layouts.</div>
  </div>
</div>
<!-- States: .done | .active | (default pending) -->

Code Blocks

Syntax-highlighted code with a copy button. Language label in header. Inline code also styled.

javascript

// Toggle theme with one line
document.documentElement.setAttribute('data-theme', 'light');

css

/* Override the accent colour */
:root {
  --v-accent: #7c3aed; /* Purple */
}

Tooltips & Popovers

Bootstrap tooltips and popovers, auto-initialised by Vectra JS.

html

<!-- Tooltip (auto-initialised by Vectra JS) -->
<button data-bs-toggle="tooltip" title="Tooltip text">Hover me</button>
<button data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bottom">Bottom</button>

<!-- Popover -->
<button tabindex="0" data-bs-toggle="popover"
        title="Popover title"
        data-bs-content="Popover body content.">Popover</button>

Testimonials

Testimonial Slider

Touch-enabled slider with dot navigation. Pass data-autoplay="4000" for auto-advance.

Vectra UI Kit has drastically sped up our front-end workflow. The dark/light theming is seamless and the components are pixel-perfect.

AJ

Alice Johnson

Lead Designer, Acme Corp

The accessibility-first approach is exactly what we needed. ARIA attributes and focus management work flawlessly out of the box.

BW

Bob Williams

Frontend Engineer, TechFlow

No build tools, no configuration hell. I dropped in the two files and had a professional-looking interface in under an hour.

CD

Carol Davis

Solo Developer

html

<div class="v-testimonial-slider" data-autoplay="5000">
  <div class="v-testimonial-track">
    <div class="v-testimonial-card">
      <div class="v-testimonial-quote">Your quote here.</div>
      <div class="v-testimonial-author">
        <div class="v-testimonial-avatar">AJ</div>
        <div>
          <div class="v-testimonial-name">Alice Johnson</div>
          <div class="v-testimonial-title">Lead Designer, Acme Corp</div>
        </div>
      </div>
    </div>
  </div>
  <div class="v-slider-controls">
    <button class="v-slider-btn" data-slider-prev aria-label="Previous"><i class="fa-solid fa-chevron-left"></i></button>
    <div class="v-slider-dots"><div class="v-slider-dot active"></div></div>
    <button class="v-slider-btn" data-slider-next aria-label="Next"><i class="fa-solid fa-chevron-right"></i></button>
  </div>
</div>

Pricing

Pricing Cards

Pricing layout with included/excluded features and a featured highlight state.

Starter

Perfect for side projects.

$0 / month

3 projects

10 GB storage

Priority support

Custom domain

Pro

For teams and professionals.

$29 / month

Unlimited projects

100 GB storage

Priority support

Custom domain

Enterprise

Scale with confidence.

$99 / month

Unlimited projects

1 TB storage

Priority support

Custom domain

html

<div class="v-card v-pricing-card">
  <h5 class="mb-1">Pro</h5>
  <div class="v-price mb-3">$29 <span class="v-price-period">/ month</span></div>
  <div class="v-pricing-feature included"><i class="fa-solid fa-check"></i> Feature one</div>
  <div class="v-pricing-feature excluded"><i class="fa-solid fa-xmark"></i> Locked feature</div>
  <button class="v-btn v-btn-primary w-100 mt-4">Get Started</button>
</div>
<!-- Add class "featured" to v-pricing-card for the highlighted variant -->

Stats

Stat Cards

Animated number counters triggered on scroll via data-counter.

0

Total Users

0

%

Uptime

0

GitHub Stars

0

Components

html

<div class="v-card v-stat-card">
  <div class="v-stat-value" data-counter="12849">0</div>
  <div class="v-stat-label"><i class="fa-solid fa-users me-1"></i>Total Users</div>
</div>
<!-- data-counter triggers an animated number on scroll -->
<!-- Optional: data-counter-duration="2000" (ms) -->

File Upload

File Upload Drop Zone

Draggable upload zone with filename display on selection.

Drop files here or click to browse

Max file size: 10 MB

html

<div class="v-drop-zone position-relative"
     data-placeholder="Drop files here or click to browse">
  <input type="file" class="position-absolute"
         aria-label="File upload" multiple />
  <i class="fa-solid fa-cloud-arrow-up fa-2x mb-2"></i>
  <div class="fw-semibold mb-1">Drop files here or click to browse</div>
  <div class="v-small v-text-muted" data-file-label>Max file size: 10 MB</div>
</div>

FAB

Floating Action Button

Expandable FAB group. Toggle child actions with data-fab-toggle.

html

<div class="v-fab-group">
  <!-- Mini action buttons (hidden by default) -->
  <button class="v-fab-mini" title="Share">
    <i class="fa-solid fa-share-nodes"></i>
  </button>
  <button class="v-fab-mini" title="Edit">
    <i class="fa-solid fa-pen"></i>
  </button>
  <!-- Main FAB button -->
  <button class="v-fab" data-fab-toggle aria-label="Actions">
    <i class="fa-solid fa-plus"></i>
  </button>
</div>

Offcanvas

Offcanvas Panel

Bootstrap offcanvas with Vectra styling. Opens from start, end, top, or bottom.

html

<button data-bs-toggle="offcanvas"
        data-bs-target="#myPanel">Open</button>

<div class="offcanvas offcanvas-end" id="myPanel"
     tabindex="-1"
     aria-labelledby="myPanelLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="myPanelLabel">Panel</h5>
    <button class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Content here.
  </div>
</div>

Cards

Default

Glass

Accent

Outline

Buttons

Badges

Alerts

Modals

Tabs

Accordion

What is Vectra UI Kit?

Do I need a build tool?

Can I use it commercially?

Tables

Progress Bars

Spinners & Loaders

Pagination

Breadcrumbs

Timeline

Project Kickoff

v1.0 Released

v2.0 — Pro Edition

Steps

Code Blocks

Tooltips & Popovers

Testimonial Slider

Pricing Cards

Starter

Pro

Enterprise

Stat Cards

File Upload Drop Zone

Floating Action Button

Offcanvas Panel

Offcanvas Panel