Features

• 60+ Components — Form inputs, data display, navigation, feedback, overlays, and more
• Vue 3 Composition API — Built with <script setup>, fully tree-shakeable
• TypeScript — Full type definitions out of the box
• Dark Mode — All components support light and dark themes
• i18n — Built-in localization (English, Russian, Uzbek)
• Zero CSS Import — Styles are auto-injected, no separate CSS file needed
• Lightweight — Vue is the only peer dependency

Installation

npm install @veloxui/vue

Quick Start

import { createApp } from 'vue'
import VeloxUI from '@veloxui/vue'
import App from './App.vue'

const app = createApp(App)
app.use(VeloxUI)
app.mount('#app')

Then use any component in your templates:

<template>
  <VxButton type="primary">Click me</VxButton>
  <VxInput v-model="name" placeholder="Enter your name" />
  <VxSelect v-model="color" :options="['Red', 'Green', 'Blue']" />
</template>

Components

Form

| Component | Description | |-----------|-------------| | VxInput | Text, password, email, number, search, textarea with floating labels | | VxSelect | Dropdown select with search, multiple, groups | | VxInputSelect | Hybrid input + select combo | | VxAutocomplete | Input with autocomplete suggestions | | VxCheckbox | Checkbox and checkbox group | | VxRadio | Radio, radio button, and groups | | VxSwitch | Toggle switch | | VxSlider | Range slider | | VxRating | Star rating | | VxDatePicker | Date picker with range support | | VxDateTimePicker | Combined date and time picker | | VxTimePicker | Time selection | | VxColorPicker | Color picker | | VxCurrencyInput | Currency formatted input | | VxUpload | File upload with drag & drop | | VxTransfer | Two-column transfer list | | VxForm | Form wrapper with validation | | VxDynamicForm | JSON schema form builder | | VxTextEditor | Rich text editor with 80+ toolbar features |

Data Display

| Component | Description | |-----------|-------------| | VxTable | Data table with sorting, filtering, pagination | | VxInfoTable | Key-value info display with copy support | | VxTree | Hierarchical tree view | | VxCalendar | Calendar display | | VxCard | Card container with header, content, footer | | VxTag | Tag labels with groups | | VxBadge | Status badges | | VxAvatar | Avatar with group support | | VxImage | Image with lightbox viewer | | VxTimeline | Timeline event list | | VxProgress | Progress bar | | VxSkeleton | Loading skeleton placeholder | | VxPagination | Page navigation |

Navigation

| Component | Description | |-----------|-------------| | VxMenu | Navigation menu | | VxSidebar | Collapsible sidebar | | VxTabs | Tabbed content | | VxSteps | Step indicator | | VxBreadcrumb | Breadcrumb navigation | | VxDropdown | Dropdown menu | | VxBacktop | Back-to-top button | | VxAnchor | Anchor link navigation | | VxFinder | Column-based file/item finder |

Feedback & Overlay

| Component | Description | |-----------|-------------| | VxDialog | Confirmation dialog | | VxModal | Modal dialog | | VxDrawer | Slide-out drawer | | VxMessage | Toast messages | | VxNotification | Notification toasts | | VxAlert | Alert banners | | VxTooltip | Tooltips | | VxPopconfirm | Confirmation popover | | VxTour | Guided tour |

Layout

| Component | Description | |-----------|-------------| | VxLayoutContainer | Layout with header, aside, main, footer | | VxSplitter | Resizable panel splitter | | VxCollapsible | Collapsible content | | VxAccordion | Accordion panels | | VxScrollbar | Custom scrollbar | | VxAffix | Fixed position element | | VxSegment | Segment control |

Other

| Component | Description | |-----------|-------------| | VxButton | Button with variants and button groups | | VxConfigProvider | Global configuration and locale |

Directives

<!-- Loading overlay -->
<div v-loading="isLoading">Content</div>

<!-- With options -->
<div v-loading="{ visible: true, text: 'Loading...', type: 'dots' }">
  Content
</div>

Localization

import VeloxUI from '@veloxui/vue'
import { ru } from '@veloxui/vue'

app.use(VeloxUI)

<VxConfigProvider :locale="ru">
  <App />
</VxConfigProvider>

Supported locales: en (default), ru, uz

Browser Support

All modern browsers — Chrome, Firefox, Safari, Edge.

License

MIT