Unit UI

A lightweight, high-performance Vue 3 component library built with TypeScript and SCSS.

Features

• Built with Vue 3 Composition API
• Full TypeScript support with generated declaration files
• Optimized for tree-shaking
• SCSS-based styling with CSS variables for customization

Installation

Install the package using npm:

npm install @roman_zhurakovskiy/unit-ui

Setup

Global Styles

Import the library's CSS in your entry file (e.g., main.ts or App.vue):

import '@roman_zhurakovskiy/unit-ui/style.css'

Usage Example

Import components directly into your Vue SFC:

<script setup lang="ts">
import { ref } from 'vue'
import { UButton, UInput } from '@roman_zhurakovskiy/unit-ui'

const name = ref('')
const handleSubmit = () => {
  console.log('Submitted:', name.value)
}
</script>

<template>
  <div class="form-wrapper">
    <UInput 
      v-model="name" 
      label="Username" 
      placeholder="Enter your name" 
      size="md"
    />
    
    <UButton @click="handleSubmit" size="md">
      Submit
    </UButton>
  </div>
</template>

Component API

UButton

The primary button component for user actions.

• Props:
  • size: 'sm' | 'md' | 'lg' (default: 'md')
  • disabled: boolean (default: false)

UInput

A comprehensive input field with built-in validation styling.

• Props:
  • modelValue: string | number
  • label: string
  • placeholder: string
  • error: string (displays error message and applies error styles)
  • size: 'sm' | 'md' | 'lg' (default: 'md')
  • type: 'text' | 'email' | 'password' | 'number' | 'search' (default: 'text')
  • disabled: boolean (default: false)

License

MIT License © 2026 Roman Zhurakovskiy