SVAR Vue – New UI Component Library for Interactive Vue Apps

If you're building Vue projects and looking for a UI library to speed up your development, we have a new open-source Vue 3 component library waiting for you to try!

SVAR Vue library offers a set of pre-built, TypeScript-ready, well-designed components for most common use cases: form controls, navigation elements, modals, edit forms, and filtering UI.

What is SVAR Vue?

SVAR Vue is part of SVAR UI, a family of open-source component libraries built natively for modern JavaScript frameworks: Svelte, React and now Vue. "Natively" is the key word here: no wrappers or adapters — just a framework-first codebase.

Today we're releasing three SVAR packages for Vue 3:

• SVAR Vue Core — a set of 30+ UI components for data-driven interfaces
• SVAR Vue Editor — configurable edit forms for any structured data
• SVAR Vue Filter — a complete filtering toolkit, from compact bars to query builders

All three are MIT-licensed and available on SVAR GitHub: Core, Editor, and Filter 🛠️

30+ Core Components

SVAR Vue Core library is the foundation. It gives you the everyday building blocks — buttons, checkboxes, radio inputs, select, datepicker, tabs, modals, notifications, sidebar panel, and more. All components are designed for data-intensive apps with virtualization and dynamic loading built in.

Themes (light and dark) are included out of the box and fully customizable via CSS variables. Menu, Toolbar, Comments, and Tasklist are available as separate add-ons, so your bundle only includes what you actually use.

This is how you install SVAR Vue Core library and Menu component via npm:

npm install @svar-ui/vue-core
npm install @svar-ui/vue-menu

The example code of adding a simple button:

<script setup>
import { Button, Willow } from "@svar-ui/vue-core";
</script>

<template>
  <Willow>
    <!-- Place your application code here -->
    <Button>Click Me</Button>
  </Willow>
</template>

Wrap your app in <Willow> (or <WillowDark>) to apply the theme globally. Find the full component list in the Vue Core docs.

Configurable Edit Form

SVAR Vue Editor component solves a specific but very common problem: you have structured data — a user profile, a product record, a table row, an info card — and you need an edit form for it. Building that from scratch every time is tedious.

The Editor gives you a configurable form component you can attach to any data structure and display as a popup, sidebar, or inline form.

It integrates natively with all SVAR Vue Core controls, supports one and two-column layouts, collapsible and accordion sections, custom validation, and both auto-save and on-action save modes.

To install SVAR Vue Editor, use:

npm install @svar-ui/vue-editor

Then you can add an edit form with preloaded data like this:

<script setup>
import { Editor, Willow } from "@svar-ui/vue-editor";

const items = [
  { comp: "text",     key: "name",  label: "Name" },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  admin: true
};
</script>

<template>
  <Willow>
    <Editor :items="items" :values="values" />
  </Willow>
</template>

Each item in the items array defines a field type (comp), a data key, and a label. The values object preloads the form — useful when editing an existing record. Add :readonly="true" to render the same form in read-only mode.

Flexible Filter Library

SVAR Vue Filter is a library of four components, each aimed for a different level of filtering complexity:

• FilterBar — compact inline search
• FilterEditor — single-field rule editor
• FilterBuilder — full visual query builder with nested AND/OR logic
• FilterQuery — a YouTrack-style input with autocomplete, syntax highlighting, and an optional natural language mode

With the FilterBuilder, you can create an intuitive query builder interface with nested fields, boolean logic, and give your users a tool to configure complex filters with ease.

FilterQuery is also worth calling out: its natural language mode connects to an AI/NLP endpoint and converts plain-text queries like "tasks created last week assigned to me" into structured filter rules. Users can see these rules and edit them to find data they need.

The Filter library is installed like this:

npm install @svar-ui/vue-filter

Find the full API and examples in the Filter docs.

What Vue Components Are Coming Next

Core, Editor, and Filter are the foundation for the broader SVAR Vue component library. We plan to release next:

• Vue DataGrid — fast, feature-rich, and accessible data grid
• Vue Gantt Chart — interactive timeline and project management
• Vue File Manager — file browsing and management UI

Sign up to our newsletter to get notified when the new Vue component is released.

We're glad to finally be in the Vue ecosystem. Try the packages, check the docs, see the demos, and let us know what you think. The idea behind SVAR has always been simple: the best component library is the one that lets you ship using the code you already know.

Happy coding! 💻