Getting Started

VeloxUI is a high-performance Vue 3 component library with 60+ production-ready components, built-in theming, full tree-shaking, and TypeScript support out of the box.

Requirements

• Vue ^3.4
• Node.js >=18
• A build tool that supports ES modules (Vite, Nuxt 3, Webpack 5+, Rspack, etc.)

Installation

Install the package with your favourite package manager:

npm

npm install veloxui

pnpm

pnpm add veloxui

yarn

yarn add veloxui

bun

bun add veloxui

Full Import

The fastest way to get started — register every component and directive globally:

import { createApp } from 'vue'
import VeloxUI from 'veloxui'
import 'veloxui/dist/style.css'
import App from './App.vue'

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

This is convenient for prototyping, but ships the entire bundle. For production apps, prefer tree-shaking.

Tree-Shaking (Recommended)

Import only what you actually use — component styles are bundled alongside each component and pulled in automatically:

import { VxButton, VxInput, VxSelect } from 'veloxui'

No extra plugin, no babel transform, no config — modern bundlers (Vite, Rollup, Webpack 5) will strip unused components from your final build.

Basic Usage

<script setup>
import { ref } from 'vue'
import { VxButton, VxInput } from 'veloxui'

const name = ref('')
</script>

<template>
  <VxInput v-model="name" placeholder="Your name" />
  <VxButton type="primary" @click="$emit('save')">Save</VxButton>
</template>

Every component is prefixed with Vx to avoid naming conflicts with your own components.

Global Configuration

Wrap your application with VxConfigProvider to set locale, default sizes, and shared options:

<script setup>
import { VxConfigProvider } from 'veloxui'
import en from 'veloxui/locale/en'
</script>

<template>
  <VxConfigProvider :locale="en" size="medium">
    <RouterView />
  </VxConfigProvider>
</template>

See the Config Provider page for the full list of supported options and locales.

TypeScript

VeloxUI is written in TypeScript and ships with complete type definitions. No extra @types/* package is needed — you get prop, emit, slot, and method types automatically in your IDE.

import type { VxButtonProps, VxTableColumn } from 'veloxui'

Nuxt 3

Works out of the box — add it to nuxt.config.ts:

export default defineNuxtConfig({
  modules: [],
  css: ['veloxui/dist/style.css'],
  build: {
    transpile: ['veloxui'],
  },
})

Then auto-import components or register them in a plugin.

SSR

All components are SSR-safe. Components that depend on window / document (Modal, Tooltip, Dropdown, etc.) hydrate on the client and do not leak DOM APIs to the server.

Theming

VeloxUI is fully themeable through CSS variables — no build step, no preprocessor, no JS API needed. Override any variable in a parent selector to retheme everything below it.

:root {
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --primary-hover: #1d4ed8;

  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --secondary-hover: #e2e8f0;

  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --destructive-hover: #b91c1c;

  --background: #ffffff;
  --foreground: #09090b;

  --accent: #f4f4f5;
  --accent-foreground: #18181b;

  --muted: #f4f4f5;
  --muted-foreground: #71717a;

  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #a1a1aa;

  --radius: 0.625rem;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

Dark Mode

Toggle dark mode by adding the .dark class to <html> (or any ancestor) and re-declaring the variables you want to change:

.dark {
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --primary-hover: #e4e4e7;

  --background: #09090b;
  --foreground: #fafafa;

  --border: rgba(255 255 255 / 0.1);
}

For a fully interactive theme playground with presets and a live preview, visit the Theming page.

All Variables

Variable	Description
--primary	Primary button background
--primary-foreground	Primary button text
--primary-hover	Primary button hover
--secondary	Secondary button background
--secondary-foreground	Secondary button text
--secondary-hover	Secondary button hover
--destructive	Destructive button background
--destructive-foreground	Destructive button text
--destructive-hover	Destructive button hover
--background	Page background
--foreground	Default text color
--accent	Hover background for ghost/outline
--accent-foreground	Hover text for ghost/outline
--muted	Muted background
--muted-foreground	Muted text
--border	Border color
--input	Input border color
--ring	Focus ring color
--radius	Base border radius
--shadow-xs	Extra small shadow
--shadow-sm	Small shadow

Component Prefix

All components use the Vx prefix to avoid naming conflicts:

Component	Name
Button	VxButton
ButtonGroup	VxButtonGroup
Input	VxInput
Badge	VxBadge
Switch	VxSwitch
Modal	VxModal

Browser Support

VeloxUI targets modern evergreen browsers with ES2020 support:

• Chrome / Edge ≥ 90
• Firefox ≥ 90
• Safari ≥ 14

Legacy browsers (including IE) are not supported.

What's Next?

• Browse the full component catalog — 60+ components with live examples.
• Explore the Theming page to build your own design tokens.
• Check out complex composite demos like Chat, Finder, Dynamic Form and Form Playground.