Typography
HTML defines text structure; CSS classes define its appearance. Fonts and sizes come from the theme.
Documentation
Library setup, components, interface text, colours and icons. Components include configurable examples and copyable code.
01 / Getting started
Installation
Vue 3 is the only required peer dependency. Install the package, import styles and select a theme. Use WlConfig for shared pt, locale and animation settings. The 1.0 source uses English built-in text by default; configure locale: wlLocaleRu explicitly for Russian. This breaking source migration is not a published 0.12.1 patch.
Install with pnpm
pnpm add gavia-ui vuemain.ts · application setup
import { createApp } from "vue";
import "gavia-ui/styles/reset.css";
import "gavia-ui/styles/base.css";
import "gavia-ui/styles/primitives.css";
import "gavia-ui/themes/white.css";
import App from "./App.vue";
document.documentElement.dataset.wlTheme = "white";
createApp(App).mount("#app");The example imports Classic. For Classic Dark, Newspaper, Gavia or Gavia Dark, import the matching CSS from gavia-ui/themes/ and set data-wl-theme on the root element. Gavia and its font are available since 0.9.1; Gavia Dark since 0.10.0. Both Gavia themes also require gavia-ui/styles/fonts/gavia.css.
Interface foundations
Typography, layout and interface content. Rules and code examples.
Layout and grid
Set page width, columns, gap and breakpoints. Use library CSS classes and customise layout details with local CSS.
Responsive design
Choose what drives the layout: window width, container width or component behaviour. Below are four configurable examples.
Content and states
Labels and messages explain what is happening and what to do next. Colour and styling support the text.
02 / Components
Components and examples
The catalogue contains 60 components. Each includes a configurable example, additional scenarios, API and accessibility guidance. Props, defaults, events, slots and v-model come from the manifest.
Examples, API and accessibility
WlButton
Variants, sizes, disabled/loading, pt and accessibility guidance. The Vue SFC code matches the example on the page.
03 / Appearance
Tokens and themes
Tokens follow foundation → semantic → component layers and use the namespace --wl-*. Import theme CSS and select it through data-wl-theme. Five themes are available; switching preserves component DOM and behaviour.
04 / Icons
Icons
Pass to name an icon name from the built-in SVG catalogue. To add icons, use icons:sync and icons:check.
05 / Updating
Migration
Wl* exports, wl-* classes and --wl-* tokens keep their names. Before updating, read the notes for the target version and check your application.