VA UI Components

A comprehensive Vue 3 UI components library with modern design, accessibility features, and TypeScript support. Built with Tailwind CSS for easy customization and styling.

🚀 Features

• ✅ Vue 3 with Composition API support
• ✅ TypeScript definitions included
• ✅ Tailwind CSS integration for easy styling
• ✅ Tree-shakable components for optimal bundle size
• ✅ Accessible design patterns (WCAG compliant)
• ✅ Modern and responsive components
• ✅ Easy integration with existing Vue projects
• ✅ 18+ Production-ready components

📦 Installation

npm install va-ui-components

🔧 Quick Start

Option 1: Global Registration (Recommended for most projects)

Register all components globally in your main.js:

// main.js
import { createApp } from 'vue'
import VAUIComponents from 'va-ui-components'
import App from './App.vue'

const app = createApp(App)

// Register all VA UI Components globally
app.use(VAUIComponents)

app.mount('#app')

Then use components directly in any Vue file without importing:

<template>
  <div>
    <VAButton color="dark-blue">Click Me</VAButton>
    <VAInput v-model="text" placeholder="Enter text" />
    <VAAlert type="success">Success message!</VAAlert>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

Option 2: Individual Component Import (Tree-shaking)

Import only the components you need for optimal bundle size:

// In your component file
import { Button, Input, Alert, InputWithDropdown } from 'va-ui-components'

export default {
  components: {
    VAButton: Button,
    VAInput: Input,
    VAAlert: Alert,
    VAInputWithDropdown: InputWithDropdown
  },
  data() {
    return {
      text: ''
    }
  }
}

Option 3: Import Specific Components in main.js

Register only specific components globally:

// main.js
import { createApp } from 'vue'
import { Button, Input, Alert } from 'va-ui-components'
import App from './App.vue'

const app = createApp(App)

// Register specific components
app.component('VAButton', Button)
app.component('VAInput', Input)
app.component('VAAlert', Alert)

app.mount('#app')

Available Component Imports

All components can be imported using their names:

import {
  Alert,
  Badge,
  BreadCrumb,
  Button,
  Checkbox,
  ComboBox,
  Dialog,
  ErrorContainer,
  Input,
  InputWithDropdown,
  Label,
  SingleSelector,
  Switch,
  Tab,
  TabPanel,
  TextArea,
  Tooltip
} from 'va-ui-components'

📚 Components Reference

🔘 Button (VAButton)

Versatile button component with multiple styles, colors, and states.

Props:

• size - Button size: 'normal' | 'narrow' | 'round' (default: 'normal')
• color - Button color: 'dark-blue' | 'sky-blue' | 'red' | 'none' (default: 'dark-blue')
• filled - Filled or outlined style (default: true)
• disabled - Disable button (default: false)
• loading - Show loading state (default: false)
• shadow - Add shadow effect (default: true)
• icon - Icon path
• iconPosition - Icon position: 'prefix' | 'suffix' (default: 'prefix')

Usage:

<VAButton color="dark-blue" :filled="true">
  Click Me
</VAButton>

<VAButton color="red" :loading="true">
  Loading...
</VAButton>

<VAButton color="sky-blue" :filled="false">
  Outlined Button
</VAButton>

📝 Input (VAInput)

Text input component with validation, labels, and customization options.

Props:

• modelValue - v-model binding (String)
• label - Input label text
• placeholder - Placeholder text (default: 'Example Placeholder')
• disabled - Disable input (default: false)
• required - Mark as required field (default: false)
• requiredLabel - Required field label (default: 'Required')
• clearable - Show clear button (default: false)
• searchable - Show search icon (default: false)
• showPassword - Password input type (default: false)
• validateFunc - Custom validation function
• errorMessage - Error message to display
• labelIcon - Icon for label

Events:

• @update:modelValue - Emitted on value change
• @blur - Emitted on blur

Usage:

<VAInput 
  v-model="email"
  label="Email Address"
  placeholder="Enter your email"
  :required="true"
  :clearable="true"
/>

<VAInput 
  v-model="password"
  label="Password"
  :showPassword="true"
  :required="true"
/>

🔽 InputWithDropdown (VAInputWithDropdown)

Combined dropdown selector and input field for filtered searches or categorized inputs.

Props:

• options - Array of dropdown options [{ label, value }]
• dropdownWidth - Dropdown width class (e.g., 'w-1/4', 'w-1/3')
• dropdownPlaceholder - Dropdown placeholder text
• inputPlaceholder - Input placeholder text
• defaultOption - Default selected option value
• prefix - Prefix icon path
• suffix - Suffix icon path
• clearable - Show clear button (default: false)

Events:

• @search - Emitted with { dropdown: value, input: text }

Usage:

<VAInputWithDropdown
  dropdown-width="w-1/4"
  :options="searchOptions"
  dropdown-placeholder="Select Type"
  input-placeholder="Search..."
  @search="handleSearch"
/>

✅ Checkbox (VACheckbox)

Customizable checkbox component with multiple states.

Props:

• modelValue - v-model binding (Boolean)
• label - Checkbox label
• disabled - Disable checkbox (default: false)

Usage:

<VACheckbox v-model="agreed" label="I agree to terms" />

📋 SingleSelector (VASingleSelector)

Dropdown selector component for single selection.

Props:

• modelValue - v-model binding
• options - Array of options [{ label, value }]
• placeholder - Placeholder text
• disabled - Disable selector (default: false)

Usage:

<VASingleSelector
  v-model="selectedCountry"
  :options="countries"
  placeholder="Select Country"
/>

🎯 ComboBox (VAComboBox)

Advanced multi-select component with search functionality.

Props:

• modelValue - v-model binding (Array)
• options - Array of options
• placeholder - Placeholder text
• searchable - Enable search (default: true)
• disabled - Disable component (default: false)

Usage:

<VAComboBox
  v-model="selectedItems"
  :options="items"
  placeholder="Select multiple items"
  :searchable="true"
/>

📝 TextArea (VATextArea)

Multi-line text input with resize options.

Props:

• modelValue - v-model binding (String)
• placeholder - Placeholder text
• rows - Number of rows (default: 3)
• disabled - Disable textarea (default: false)
• maxlength - Maximum character length

Usage:

<VATextArea
  v-model="description"
  placeholder="Enter description"
  :rows="5"
  :maxlength="500"
/>

🔄 Switch (VASwitch)

Toggle switch component.

Props:

• modelValue - v-model binding (Boolean)
• disabled - Disable switch (default: false)

Usage:

<VASwitch v-model="isEnabled" />

🏷️ Label (VALabel)

Form field label component with icon support.

Props:

• text - Label text
• required - Show required indicator (default: false)
• requiredLabel - Required label text (default: 'Required')
• icon - Icon path
• disabled - Disabled state styling (default: false)

Usage:

<VALabel text="Username" :required="true" />

🔔 Alert (VAAlert)

Status and notification message component.

Props:

• type - Alert type: 'success' | 'warning' | 'error' | 'info' (default: 'warning')
• iconPosition - Icon alignment: 'center' | 'start' | 'end' (default: 'center')
• showIcon - Show icon (default: true)

Usage:

<VAAlert type="success">
  Operation completed successfully!
</VAAlert>

<VAAlert type="error">
  An error occurred. Please try again.
</VAAlert>

<VAAlert type="warning">
  Please review your information.
</VAAlert>

🏷️ Badge (VABadge)

Badge component for labels and status indicators.

Usage:

<VABadge>New</VABadge>
<VABadge type="success">Active</VABadge>

🗂️ Tab & TabPanel (VATab, VATabPanel)

Tab navigation components.

Usage:

<VATab v-model="activeTab">
  <VATabPanel name="tab1" label="Tab 1">
    Content for tab 1
  </VATabPanel>
  <VATabPanel name="tab2" label="Tab 2">
    Content for tab 2
  </VATabPanel>
</VATab>

🍞 BreadCrumb (VABreadCrumb)

Navigation breadcrumb component.

Props:

• items - Array of breadcrumb items [{ label, path }]

Usage:

<VABreadCrumb :items="[
  { label: 'Home', path: '/' },
  { label: 'Products', path: '/products' },
  { label: 'Details' }
]" />

💬 Dialog (VADialog)

Modal dialog component.

Props:

• modelValue - v-model for visibility (Boolean)
• title - Dialog title
• width - Dialog width (default: '500px')

Usage:

<VADialog v-model="showDialog" title="Confirmation">
  <p>Are you sure you want to proceed?</p>
  <template #footer>
    <VAButton @click="showDialog = false">Cancel</VAButton>
    <VAButton color="dark-blue" @click="confirm">Confirm</VAButton>
  </template>
</VADialog>

💡 Tooltip (VATooltip)

Contextual help and information tooltip.

Props:

• content - Tooltip content
• placement - Tooltip placement: 'top' | 'bottom' | 'left' | 'right'

Usage:

<VATooltip content="This is helpful information" placement="top">
  <VAButton>Hover me</VAButton>
</VATooltip>

⚠️ ErrorContainer (VAErrorContainer)

Error message container for form validation.

Props:

• isError - Show error state (Boolean)
• alertText - Error message text

Usage:

<VAErrorContainer :isError="hasError" alertText="Invalid input">
  <VAInput v-model="value" />
</VAErrorContainer>

🎨 Styling & Customization

This library uses Tailwind CSS for styling. Ensure Tailwind is installed in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Tailwind Configuration

Add the library paths to your tailwind.config.js:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/va-ui-components/**/*.{vue,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

🔧 TypeScript Support

Full TypeScript definitions are included. Components are automatically typed when using TypeScript:

import { Button, Input } from 'va-ui-components'

// TypeScript will provide full autocomplete and type checking