SVAR Logo
DemosLicensesContact
Sign Up
 
 
 
 
 
 
 
 

Vue UI Component Library

Advanced Components for Business Applications

Production-ready Vue 3 components for data management and project scheduling interfaces: data grid, Gantt chart, calendar, and more. TypeScript and AI coding agent support included.

  • Gantt
  • Calendar
  • DataGrid
  • Core
SVAR Vue Gantt component — light & dark theme

Go to Gantt page
SVAR Vue Gantt is an easy-to-use component for creating web-based Gantt charts.
  • task dependencies
  • easy task editing
  • drag-and-drop UI
  • high-performance
Learn more
SVAR Vue Calendar component — light & dark theme

Go to Calendar page
SVAR Vue Calendar is an interactive Vue component for managing events and schedules.
  • multiple views
  • drag-and-drop events
  • calendar groups
  • TypeScript-ready
Learn more
SVAR Vue DataGrid component — light & dark theme

Go to DataGrid page
SVAR Vue DataGrid provides an easy way to display, organize and manage tabular data.
  • feature-rich
  • in-cell editing
  • fast and responsive
  • accessible
Learn more
SVAR Vue Core component — light & dark theme

Go to Core page
SVAR Vue Core includes 30+ essential components for building interactive web interfaces.
  • form controls
  • popups
  • menu & toolbar
  • date & time pickers
Learn more

Gantt

SVAR component — light & dark theme

Go to Gantt page
SVAR Vue Gantt is an easy-to-use component for creating web-based Gantt charts.
  • task dependencies
  • easy task editing
  • drag-and-drop UI
  • high-performance
Learn more

Calendar

SVAR component — light & dark theme

Go to Calendar page
SVAR Vue Calendar is an interactive Vue component for managing events and schedules.
  • multiple views
  • drag-and-drop events
  • calendar groups
  • TypeScript-ready
Learn more

DataGrid

SVAR component — light & dark theme

Go to DataGrid page
SVAR Vue DataGrid provides an easy way to display, organize and manage tabular data.
  • feature-rich
  • in-cell editing
  • fast and responsive
  • accessible
Learn more

Core

SVAR component — light & dark theme

Go to Core page
SVAR Vue Core includes 30+ essential components for building interactive web interfaces.
  • form controls
  • popups
  • menu & toolbar
  • date & time pickers
Learn more

Benefits of SVAR Vue UI components

Powerful, open-source components

Build modern applications with a set of ready-to-use Vue UI components: from DataGrid, Gantt, and Calendar, to Core library of 30+ essential UI elements and form controls for everyday interface needs.
SVAR picture

Built natively for Vue

SVAR components are built with Vue at their core, ensuring seamless integration with Vue ecosystem, as well as with JavaScript libraries, frameworks, and backend technologies.
SVAR picture

Cross-platform support

SVAR components seamlessly adapt to desktop and touch screens, ensuring smooth performance across different devices. Experience full cross-platform support and responsive layout adjustments based on screen size.

tags

Flexible customization

Tailor the components' look and behavior to match your requirements. Robust customization capabilities give you the freedom to take full control over the appearance and functionality.
SVAR picture

Blazing-fast performance

Experience seamless handling of large data volumes with SVAR Vue components. Enjoy industry-leading rendering speed for a seamless and responsive user experience
SVAR picture

Works with your AI coding agent

SVAR Vue components work seamlessly with AI coding agents. Install the skills for Claude Code, Cursor, Gemini CLI, or Codex to get accurate, SVAR-aware code generation. Connect the SVAR MCP server to give your AI assistant direct access to the latest docs and examples. Find details in the docs

Explore SVAR Vue Components

SVAR Vue is a growing library of open-source Vue UI components, packed with advanced functionality, high performance, and an intuitive, user-friendly experience.

Gantt Chart

Elevate your web app with our Vue Gantt widget, offering an elegant and interactive Gantt chart. Seamlessly integrate this advanced project management tool to schedule and organize tasks, ensuring clear timelines for each project activity.
Learn more SVAR picture

Event Calendar

Manage your schedule effortlessly with SVAR Vue Calendar. This visually stunning Vue event calendar component enables intuitive event management with drag-and-drop functionality, allowing users to add, edit, and delete events seamlessly.
Learn more SVAR picture

Data Grid

A high-performance Vue 3 data grid for managing and displaying large datasets. Supports sorting, filtering, inline editing, tree data, virtual scrolling, and deep customization options
Learn more SVAR picture

Filter

A powerful filtering library for Vue 3 with multiple input modes: simple in-line filters, flexible query builder, and AI-powered natural language search. Integrates directly with SVAR DataGrid and other data components.
Learn more SVAR picture

Editor

A standalone edit form component for Vue 3, designed to work with SVAR data components or independently. Configure fields, validation, and layout without building form logic from scratch.
Learn more SVAR picture

Core Library

A free, foundational UI library of 30+ components and form controls: from simple buttons, checkboxes and input fields to advanced date picker, customizable menu, toolbar, popups, and more.
Learn more SVAR picture

Pivot

Gain insights from your data with SVAR Pivot for Vue. This UI widget empowers you to summarize, analyze, and present large datasets in a structured tabular format. Enjoy high customization, and effortlessly navigate and gain insights from complex data.
Learn more SVAR picture

File Manager

SVAR File Manager is a UI component designed to help developers and users manage files and folders within a Vue-based web application. It provides a visual representation of the file system, allowing users to navigate, organize, upload, download, delete files, and perform other file-related operations.
Learn more SVAR picture

Kanban

Enhance project management with SVAR Kanban, a ready-to-use Vue component, that simplifies task board integration into your web app. Its responsive drag-and-drop interface empowers users to efficiently manage tasks and track progress.
Learn more SVAR picture

ToDo List

Streamline your tasks with SVAR ToDo List. This Vue UI component brings an editable task list to your web app, enabling users to plan and organize activities efficiently. Features include adding, editing, removing tasks, setting due dates, assigning projects, and adding custom details.
Learn more SVAR picture

Sign Up for Early Access

  • Get notified when the new SVAR Vue UI component is released!
  • Get the latest updates, tips, and best practices.
  • We promise, no spam.

Need Plain JS Components?

Frequently Asked Questions

SVAR Vue is a growing collection of high-performance, Vue-native UI components for building data-intensive enterprise web apps. It focuses on advanced components with complex logic and functionality like DataGrid, Gantt chart, Calendar, File Manager, and more — all built without wrappers, so you can use them with standard Vue 3 patterns.
The SVAR Vue component library currently includes:
  • DataGrid - A high-performance Vue data grid with sorting, filtering, virtualization, in-cell editing, and tree-like rows.
  • Gantt Chart - A Vue-native project planning component with drag-and-drop tasks, dependencies, and timeline editing.
  • Calendar - A modern event calendar with multiple views, drag-and-drop events, and time-zone support.
  • Core Library - 30+ Vue components for forms, navigation, and layout, with light and dark themes.
  • Filter Builder - A query builder for complex, multi-condition filters in Vue apps.
  • File Manager - A Vue file explorer with multiple views, file operations, and preview support.
  • Editor - A customizable Vue component for building structured edit forms.
Most SVAR Vue components are distributed under the MIT license, allowing free use in both commercial and personal projects. We also offer a paid PRO Edition for selected components like SVAR Vue Gantt and SVAR Vue Calendar that add advanced enterprise features.
Yes, SVAR Vue components are designed for enterprise-grade applications. They are optimized for large datasets, support responsive design, and follow Vue-native patterns (Composition API, TypeScript, Vite, etc.). The library is actively maintained, well-documented, and suitable for long-term, high-traffic production apps.
SVAR Vue components are compatible with Vue 3 and work in both Composition and Options API style. They are built to integrate smoothly with modern Vue stacks like Vite, Nuxt, Pinia, and TypeScript.
Yes, all SVAR Vue components come with full TypeScript support. You get type definitions, autocomplete, and type-safe props and events to reduce runtime errors and improve developer experience in Vue 3 projects.
Getting started is simple:
  • Visit the official SVAR documentation (with separate sections for Vue components).
  • Explore the live demos and their source code on SVAR’s GitHub.
  • Install the required packages via npm, for example:
  • npm install @svar-ui/vue-datagrid
  • npm install @svar-ui/vue-gantt
  • Integrate components into your Vue app as described in the Vue-specific guides.
Yes, SVAR Vue is AI-ready. We provide an MCP server and prebuilt AI skills that connect coding assistants like Cursor, Claude Code, or GitHub Copilot directly to up-to-date SVAR Vue documentation and API references. This allows your AI agent to generate accurate, working Vue component code without relying on outdated examples or hallucinated APIs. Each Vue component’s docs include a dedicated setup guide for AI-tools.
Yes, if you need custom integrations, tailored UI changes, or specialized features for your Vue app, you can contact SVAR. We offer consulting and customization services and can provide a tailored proposal based on your project requirements.
To stay updated with new SVAR Vue components and releases, you can:

Recent Releases

icon framework

Event Calendar Component for React, Svelte & Vue is Here!

Native calendar components for React, Svelte, and Vue. Build Google Calendar‑style schedulers with drag‑and‑drop, multiple views, TypeScript support, and a PRO edition for advanced scheduling.

icon framework

Introducing SVAR Vue Gantt: Interactive Project Scheduling for Vue 3

Vue-native Gantt chart component is released! Integrate interactive timelines, drag-and-drop task and dependency management directly in your Vue 3 app.

icon framework

SVAR Vue DataGrid: Build Feature-Rich Data Tables in Vue.js

Explore new SVAR Vue DataGrid, a fast, open-source Vue data grid component with virtual scrolling, tree data, and advanced editing features.