Gavia UIv1.0.0
Vue 3 + TypeScript v1.0.0

Gavia UI

Библиотека компонентов для Vue 3.

Кнопки, поля, таблицы и иконки. Общие токены, пять тем оформления и примеры с кодом.

Переменный вес 100–700 · прямой и курсив

Автор — Gorbach Dmitry. MIT · GitHub

Пакет gavia-ui@1.0.0 доступен в npm.

Добавьте Gavia UI в проект

pnpm add gavia-ui
Пример подключения

Для работы библиотеки нужен Vue 3.

Компонентов
60
Иконок
113
Токенов
447
Цвета, отступы, типографика
Темы
5
Светлые и тёмные темы

Разделы

Настройте цвета в разделе «Подбор темы» .

Об авторе

Привет! Я Дмитрий Горбач. Больше 13 лет занимаюсь коммерческой разработкой, в основном frontend.

Давно хотел сделать свой UI-кит для pet-проектов. Готовых библиотек хватает, но мне хотелось самому решать, какие компоненты нужны, как они должны работать и куда развивать проект. И самому выбирать зависимости под эти задачи.

Так появилась Gavia UI. Сначала это был небольшой набор компонентов для личных задач. Со временем он вырос, и я решил попробовать довести его до полноценной open-source библиотеки. Возможно, мои подходы и решения пригодятся кому-то ещё.

Мне нравится создавать собственные инструменты, экспериментировать с технологиями и доводить идеи до работающих продуктов. Сейчас также исследую возможности ИИ-ассистентов и агентной разработки, сочетая их со своим инженерным опытом.

Связаться со мной можно через личный сайт.

Лицензия и участие в проекте

Ошибки и предложения

Об ошибках и предложениях пишите в GitHub Issues . Если хотите внести изменения в код, прочитайте руководство для участников .

Перед обновлением прочитайте Changelog и заметки о миграции.

Подключение и пример кнопки

Подключите стили и тему, затем импортируйте компонент. В примере используется Classic. Для Gavia и Gavia Dark дополнительно подключите CSS шрифта и выберите тему gavia или gavia-dark. Gavia Dark доступна с версии 0.10.0.

Документация WlButton

01 / main.ts

Стили и тема

Базовые компоненты работают без установки плагина.

Показать main.ts
import { createApp } from "vue";
import App from "./App.vue";

// Стили подключаются явно: reset → base → примитивы → тема.
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

Пример кнопки

Нажатий: 0

Показать 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>{{ "Добавить" }}</WlButton>
    </div>
    <p role="status" class="wl-text-small">{{ "Нажатий:" }} {{ count }}</p>
  </div>
</template>

Качество и совместимость

Проверки компонентов, доступности, работы в браузерах и установки пакета.

Результаты проверок
Unit-тесты
991 / 991
Пройдено / всего в этом прогоне
Покрытие строк
98,66%
Vitest / V8 · код библиотеки

Результаты unit-тестов: · v1.0.0 · Прогон CI рабочей версии. Актуальные результаты CI — на странице качества.