About VibeUI

The Vue 3 component library for people who already love Bootstrap.

🤖 Building with an AI assistant? Point it at llms.txt (quick-start guardrails + a link to every doc) and docs/. Every component's props, events, and slots are documented — don't let it guess props or reverse-engineer from dist/. Quick reminders: data-driven components use :items / :bars / :options, visibility uses v-model, outline buttons use the outline prop, and granular tags like <vibe-card-body> / <vibe-nav-item> do not exist (use slots). All of this ships inside the npm package — see also AGENTS.md.

Bootstrap components in Vue are painful. Every modal, tooltip, dropdown, and collapse needs manual JS instantiation, event wiring, unique ID generation, ARIA linking, and teardown on unmount. Miss one step and you ship memory leaks, broken focus, duplicate IDs, or detached-DOM crashes.

VibeUI handles all of it. 60+ strictly-typed Vue 3 components that wrap Bootstrap 5.3 - and quietly own every piece of plumbing:

• JS lifecycle (init, reconfigure, dispose) with race-condition and unmount guards
• v-model on every interactive component
• Auto-generated IDs, labels, and aria-describedby via VibeFormGroup
• Focus return to trigger on modal/offcanvas close (WCAG 2.4.3)
• Touch/hybrid detection for tooltips, modals, and Android back button
• Lazy-loaded heavy dependencies (charts, WYSIWYG editor, Bootstrap JS)

Plus an interaction suite - drag/drop, sortable, resizable, slider, stepper, autocomplete, calendar, and canvas charts - filling the gap jQuery UI left behind.

You keep the Bootstrap you know. VibeUI handles the Vue you'd rather not write.

Coming from BootstrapVue? If you built on Bootstrap + Vue 2, VibeUI will feel familiar: component-per-feature, data-driven items arrays, v-model everywhere, and Bootstrap styling via props. Not a drop-in port, but the mental model carries over.

Contents

• Quick Start
• Features
• Components
  • Layout
  • Core
  • Navigation
  • Containers
  • Interactive
  • Tooltips & Popovers
  • Data & Charts
  • Forms
• Composables
• Directives
• Examples
• Documentation

Quick Start

npm install @velkymx/vibeui bootstrap

Optional peers (only if you use the features that need them):

npm install bootstrap-icons         # VibeIcon
npm install quill dompurify         # VibeFormWysiwyg (dompurify sanitizes editor HTML)

In your app entry (main.ts):

import { createApp } from 'vue'
import App from './App.vue'
import VibeUI from '@velkymx/vibeui'
import 'bootstrap/dist/css/bootstrap.min.css'

createApp(App).use(VibeUI).mount('#app')

All components register globally. Prefer explicit imports? Tree-shakeable:

import { VibeButton, VibeModal, VibeCard } from '@velkymx/vibeui'

Bootstrap CSS is imported by you. Bootstrap JS is managed internally - do not import it yourself.

30-second taste

<template>
  <!-- Tooltip: auto-inits, taps on touch, hovers on desktop -->
  <VibeTooltip text="I just work!">
    <VibeButton>Hover or Tap Me</VibeButton>
  </VibeTooltip>

  <!-- v-model modal, hybrid-ready, focus-safe -->
  <VibeModal v-model="showModal" title="Hello!">
    Fully reactive, automated, and accessible.
  </VibeModal>
</template>

Forms wire their own accessibility:

<template>
  <!-- No id needed - label, control, and feedback linked automatically -->
  <VibeFormGroup label="Email Address">
    <VibeFormInput v-model="fields.email" type="email" />
  </VibeFormGroup>
</template>

Toasts from anywhere:

import { useToast } from '@velkymx/vibeui'
const toast = useToast()
toast.success('Saved')
toast.error('Network error', { delay: 8000 })

Mount <VibeToastHost /> once at app root, dispatch from any component.

Features

Feature	What it means
Bootstrap JS abstracted	No new bootstrap.Modal(...). Init, reconfigure, and dispose are automatic - with unmount guards.
v-model everywhere	Modals, offcanvas, toasts, collapses, tabs, accordions, sliders, and every form control.
Self-wiring accessibility	VibeFormGroup generates IDs, links labels, aria-describedby, help text, and validation feedback. Modals/offcanvas return focus on close.
Strict TypeScript	Typed props, emit payloads, and provide/inject keys. Full editor autocomplete, no any.
Touch & hybrid aware	Tooltips switch to tap on touch. Modals and offcanvas honor Android back button.
Lazy-loaded	Charts, WYSIWYG editor, and Bootstrap's JS load on demand - ship only what you use.
Interaction suite	Drag/drop, sortable, resizable, slider, stepper, autocomplete, calendar, and canvas charts.

Components

60+ components covering Bootstrap 5.3 plus an interaction and data-viz suite.

Layout

Component	Description	Docs
VibeContainer	Responsive fixed/fluid container	docs
VibeRow	Flexbox grid row	docs
VibeCol	Flexbox grid column with breakpoints	docs

Core

Component	Description	Docs
VibeAlert	Contextual alert with dismiss and fade animation	docs
VibeBadge	Inline badge with variant and pill styles	docs
VibeButton	Button with variant, size, and outline styles	docs
VibeButtonGroup	Horizontal or vertical button group	docs
VibeCloseButton	Accessible dismiss button	docs
VibeIcon	Bootstrap Icons wrapper with sizing and color	-
VibeLink	Styled anchor with href validation	docs
VibePlaceholder	Animated loading placeholder	docs
VibeSkeleton	Multi-variant skeleton loading component	docs
VibeSpinner	Loading spinner with variant and size	docs

Navigation

Component	Description	Docs
VibeBreadcrumb	Breadcrumb trail from items array	docs
VibeNav	Tab/pill nav with router-link support	docs
VibeNavbar	Responsive navbar with collapse	docs
VibeNavbarBrand	Navbar brand/logo link	docs
VibeNavbarToggle	Navbar collapse toggle button	docs
VibeNavbarNav	Navbar nav list from items array	docs
VibePagination	Pagination with ellipsis and page window	docs
VibeScrollspy	Scroll-aware nav highlighting	docs

Containers

Component	Description	Docs
VibeCard	Card container with header/body/footer slots, section classes, and an image slot	docs
VibeHero	Hero / banner section (variant, bordered, bgImage, gradient, overlay)	docs
VibeListGroup	List group with router-link support	docs

Interactive

Component	Description	Docs
VibeAccordion	Accordion with always-open and flush options	docs
VibeCarousel	Image carousel with indicators and captions	docs
VibeCollapse	Toggle visibility with Bootstrap animation	docs
VibeDatePicker	Calendar date picker with range and min/max	docs
VibeDraggable	Drag source wrapper	docs
VibeDroppable	Drop target zone	docs
VibeDropdown	Dropdown menu with items array	docs
VibeModal	Modal dialog with v-model, sizes, scrollable	docs
VibeOffcanvas	Offcanvas panel with placement options	docs
VibeResizable	Resizable container with aspect-ratio lock	docs
VibeSlider	Range slider with single or dual handles	docs
VibeSortable	Sortable list with drag reorder	docs
VibeStepper	Multi-step wizard with validation	docs
VibeTabs	Tabbed interface from items array	docs
VibeTab	Individual tab panel	docs
VibeTabContent	Standalone tab-pane content host	docs
VibeToast	Toast notification component with v-model	docs
VibeToastHost	Toast container for useToast() service	docs

Tooltips & Popovers

Component	Description	Docs
VibePopover	Popover with title and text content	docs
VibeTooltip	Tooltip with hover/tap detection	docs

Data & Charts

Component	Description	Docs
VibeDataTable	Sortable, searchable, paginated data table	docs
VibeProgress	Progress bar with multi-bar and animated	docs
VibeChartBar	Bar chart (stacked, grouped)	docs
VibeChartLine	Line chart with smooth curves and fill	docs
VibeChartPie	Pie chart	docs

Charts are dependency-free, canvas-rendered, and lazy-loaded - no Chart.js or D3.

Forms

Component	Description	Docs
VibeAutocomplete	Typeahead with keyboard nav and async search	docs
VibeFileInput	File picker with drag/drop and size validation	docs
VibeFormCheckbox	Checkbox with indeterminate and group support	docs
VibeFormDatepicker	Native date input wrapper	docs
VibeFormGroup	Auto-wires label, IDs, help text, and validation	docs
VibeFormInput	Text input with types, sizes, and states	docs
VibeFormRadio	Radio button with group and inline layout	docs
VibeFormSelect	Select dropdown with single and multiple selection	docs
VibeFormSpinbutton	Numeric stepper with min/max/step	docs
VibeFormSwitch	Toggle switch with label	docs
VibeFormTextarea	Multi-line text input with character count	docs
VibeFormWysiwyg	Rich-text editor (Quill) with DOMPurify sanitization	docs
VibeInputGroup	Input with prepend/append slots	docs

Form validation rules and useForm() API: docs

Composables

Composable	Description	Docs
useBackButton	Android back button handler	docs
useBreakpoints	Reactive Bootstrap breakpoint detection	docs
useColorMode	Light/dark/auto mode with system detection	docs
useForm	Form state, dirty detection, and validation	docs
useFormValidation	Standalone validator runner with concurrency guard	docs
usePosition	Popper-style positioning utility	docs
useToast	Programmatic toast dispatch (success, error, etc.)	docs

Directives

Directive	Description	Docs
v-vibe-tooltip	Directive-based tooltip on any element	docs

Examples

Full-page templates built entirely with VibeUI components — open examples/index.html (see examples/README.md for how to run them):

Example	Shows
Starter	Navbar, hero, features, interactive components, footer
Album	Photo grid with cards, badges, and an icon nav
Pricing	Pricing cards with variant-colored headers
Checkout	Full billing form, order summary, and validation
Sign-in	Centered form with useForm validation
Dashboard	Admin shell with sidebar and VibeDataTable
Sidebars	Desktop sidebar + mobile offcanvas nav
Product	Marketing page with hero, feature grid, product cards
Carousel	Full-width VibeCarousel + featurettes
Cover	Full-viewport one-page VibeHero
Blog	Magazine layout with pagination and sidebar
Jumbotron	Modern jumbotron via the bordered VibeHero

Documentation

Full API reference: docs/ LLM-optimized reference: llms.txt