vue3-ui-xk

vue3-ui-xk

A maintainable and extensible Vue 3 UI component library

Features

• 🧩 12+ components — Button, Input, Select, Form, Table, Dialog, Toast, Radio, Checkbox and more
• 📦 Tree-shakable — Import only what you need, or register all at once
• 🎨 Customizable themes — Less design tokens for easy styling
• 🚀 TypeScript — Full type inference for props, emits, and slots
• ✅ Tested — Component coverage with Vitest + Vue Test Utils

Installation

npm install vue3-ui-xk

Usage

Full Registration

import { createApp } from 'vue'
import Vue3UI from 'vue3-ui-xk'
import 'vue3-ui-xk/dist/style.css'

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

On-Demand (Tree-Shaking)

import { RButton, RInput, RTable } from 'vue3-ui-xk'
import 'vue3-ui-xk/dist/style.css'

Custom Subset

import { createInstaller, RButton, RInput } from 'vue3-ui-xk'
import 'vue3-ui-xk/dist/style.css'

app.use(createInstaller([RButton, RInput]))

Components

Button

Action triggers with multiple style variants and loading state.

Slots: default (label), icon

<RButton type="primary" @click="handleClick">Submit</RButton>
<RButton type="danger" size="sm" :loading="isLoading">Delete</RButton>

Input

Text input with prefix/suffix, clearable, and password visibility toggle.

Events: update:modelValue, input, focus, blur, clear, enter

<RInput v-model="search" placeholder="Search..." clearable @enter="onSearch" />

Select

Dropdown selector with single, multiple, and filterable modes.

<RSelect v-model="selected" :options="options" filterable />
<RSelect v-model="tags" :options="options" multiple />

Radio & RadioGroup

Single selection from a group of options.

Radio props: modelValue, value, disabled, name
RadioGroup props: modelValue, disabled, name

<RRadioGroup v-model="gender">
  <RRadio :value="1">Male</RRadio>
  <RRadio :value="2">Female</RRadio>
</RRadioGroup>

Checkbox & CheckboxGroup

Multi-selection, standalone toggle, and indeterminate state.

Checkbox props: modelValue, value, disabled, indeterminate, name
CheckboxGroup props: modelValue, disabled

<RCheckbox v-model="agreed">I agree</RCheckbox>

<RCheckboxGroup v-model="hobbies">
  <RCheckbox value="reading">Reading</RCheckbox>
  <RCheckbox value="music">Music</RCheckbox>
</RCheckboxGroup>

Form & FormItem

Form validation with built-in rules and custom validators.

Form props: model, rules, labelWidth, inline, disabled
FormItem props: prop, label, required

Rules: required, min, max, pattern, validator

<RForm :model="formData" :rules="rules" label-width="100px" @submit="onSubmit">
  <RFormItem prop="name" label="Name">
    <RInput v-model="formData.name" />
  </RFormItem>
  <RButton type="primary" native-type="submit">Submit</RButton>
</RForm>

Table

Data table with sorting, stripes, and custom cell rendering.

Events: row-click, sort-change
Scoped slot: { row, column, index } for custom cell content.

<RTable :data="users" :columns="columns" stripe hover @row-click="handleRow">
  <template #default="{ row }">
    <RButton size="sm" @click="edit(row)">Edit</RButton>
  </template>
</RTable>

Dialog

Modal dialog with teleport, animations, and configurable footer.

<RDialog v-model="visible" title="Confirm" @confirm="onConfirm">
  <p>Are you sure?</p>
</RDialog>

Toast

Lightweight notification with auto-dismiss and type variants.

Methods: info(msg), success(msg), warning(msg), danger(msg), add(options), remove(id)

<RToast ref="toastRef" />

<script setup>
const toast = ref(null)
toast.value.success('Operation successful!')
toast.value.danger('Something went wrong')
</script>

Development

npm run dev            # Start dev server
npm run build          # Build library (Vite + types)
npm test               # Run tests
npm run test:watch     # Watch mode
npm run docs:dev       # Start VitePress docs

License

MIT