Gavia UIv1.0.0
Vue 3 + TypeScript v1.0.0

Gavia UI

A component library for Vue 3.

Buttons, inputs, tables and icons. Shared tokens, five themes and examples with code.

Variable 100–700 · upright + italic

Created by Gorbach Dmitry. MIT · GitHub

The package gavia-ui@1.0.0 is available on npm.

Add Gavia UI to your project

pnpm add gavia-ui
Setup example

The library requires Vue 3.

Components
60
Icons
113
Tokens
447
Colors, spacing and typography
Themes
5
Light and dark themes

Sections

Adjust colors in the theme builder .

About the author

Hi! I'm Dmitry Gorbach. I've been working in commercial software development for over 13 years, mostly in frontend.

I'd wanted to build my own UI kit for pet projects for a long time. There are plenty of existing libraries, but I wanted to decide which components I need, how they behave and where the project goes. And choose dependencies to suit those needs.

That's how Gavia UI started. At first, it was a small set of components for personal projects. As it grew, I decided to try turning it into a full open-source library. Perhaps some of my approaches and solutions will be useful to others.

I enjoy building my own tools, experimenting with technology and turning ideas into working products. I'm also exploring AI assistants and agent-based development, combining them with my engineering experience.

You can contact me through my personal website.

License and contributing

Bugs and suggestions

Report bugs and suggest changes in GitHub Issues . To contribute code, read the contributor guide .

Read the changelog and migration notes before upgrading.

Setup and a button example

Import the styles and a theme, then import a component. This example uses Classic. For Gavia and Gavia Dark, also import the font CSS and select gavia or gavia-dark. Gavia Dark is available from version 0.10.0.

WlButton documentation

01 / main.ts

Styles and theme

Basic components work without installing a plugin.

Show main.ts
import { createApp } from "vue";
import App from "./App.vue";

// Import styles explicitly: reset → base → primitives → theme.
import "gavia-ui/styles/reset.css";
import "gavia-ui/styles/base.css";
import "gavia-ui/styles/primitives.css";
import "gavia-ui/themes/white.css";

document.documentElement.dataset.wlTheme = "white";
createApp(App).mount("#app");

02 / App.vue

Button example

Clicks: 0

Show App.vue
<script setup lang="ts">
import { WlButton, WlIcon } from "gavia-ui";
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <div class="wl-stack" data-space="md">
    <div>
      <WlButton v-bind='{"variant":"primary"}' @click="count++"><template #icon><WlIcon name="plus" /></template>{{ "Add" }}</WlButton>
    </div>
    <p role="status" class="wl-text-small">{{ "Clicks:" }} {{ count }}</p>
  </div>
</template>

Quality and compatibility

Checks for components, accessibility, browser behavior and package installation.

Check results
Unit tests
991 / 991
Passed / total in this run
Line coverage
98.66%
Vitest / V8 · library code

Unit test results: · v1.0.0 · CI run working version. See the quality page for current CI results.