vectis-ui

Introduction

Vectis UI is a set of Vue 3 components written in TypeScript. The whole look is driven by CSS custom properties (--vectis-*), so you can retheme the library, or a single part of a page, without rebuilding anything. Styles live in cascade layers, which means your own CSS wins without fighting over specificity.

A few things you get out of the box:

• No runtime dependency other than Vue itself.
• Pay for what you import. Each component ships as its own module with its own stylesheet.
• SSR-safe, so it works with Nuxt 3 and 4 without a module or a plugin.
• Accessible by default. Keyboard support and ARIA semantics on every component, with axe checks run in CI against both the light and the dark theme.
• Light and dark themes, switchable on any DOM subtree with a data-theme attribute.
• English and French built in, and any other language can be added from your app.
• No icon font required. The icons the library draws are embedded SVGs, and you can plug in your own icon set.

Quick start

Install the package:

npm install vectis-ui
# or
pnpm add vectis-ui
# or
yarn add vectis-ui

Import the global stylesheet once, in your app's entry point:

// main.ts
import 'vectis-ui/styles.css'

Then import the components you need:

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, VInput } from 'vectis-ui'

const email = ref('')
</script>

<template>
  <VInput v-model="email" type="email" label="Email" />
  <VButton>Subscribe</VButton>
</template>

Using Nuxt? Declare the stylesheet in nuxt.config.ts instead, so it's injected during server rendering:

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['vectis-ui/styles.css'],
})

The installation guide covers both setups in more detail.

Documentation

Everything lives on vectis-ui.com, a page per component with live examples and API tables, plus guides on theming, iconography, internationalization and accessibility.

Browser support

Vectis UI targets recent browsers only:

Two features set this floor: CSS anchor positioning, used without a JavaScript fallback, and the closedby attribute of <dialog> (Chrome 134), which keeps a modal open on Escape or on a click outside when it should be. Safari does not implement closedby yet, and a small script stands in for it there. Some effects, like entry animations, are progressive enhancements and simply don't play on engines that lack them.

If your bundler targets older browsers, it may rewrite part of the library's CSS during minification. Set build.cssTarget to the versions above in your Vite (or Nuxt) config to keep it intact:

// vite.config.ts
export default defineConfig({
  build: { cssTarget: ['chrome134', 'edge134', 'safari26', 'firefox147'] },
})

Versioning

Vectis UI follows Semantic Versioning. While the version is still 0.x, a minor release can include breaking changes, so read the changelog before upgrading.

Contributing

Bug reports and feature requests are welcome in the issue tracker. To work on the library itself, see the repository.

License

Vectis UI is released under the MIT license.

The built-in icons are drawn from Material Symbols by Google, used under the Apache License 2.0. See NOTICE for details.