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
  • Kanban
  • DataGrid
  • File Manager
SVAR Vue Gantt component — light & dark theme

Go to Gantt page
SVAR Vue Gantt is a Vue 3 component for creating web-based, interactive Gantt charts.
  • tasks & dependencies
  • auto-scheduling
  • resource planning
  • 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 Kanban component — light & dark theme

Go to Kanban page
SVAR Vue Kanban is a customizable Vue 3 task board component for project workflows.
  • drag-and-drop
  • card templates
  • filtering & grouping
  • undo/redo support
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 File Manager component — light & dark theme

Go to File Manager page
SVAR Vue File Manager offers a familiar UI to browse, organize, and manage files.
  • backend agnostic
  • multiple views
  • keyboard shortcuts
  • context menu
Learn more

Gantt

SVAR component — light & dark theme

Go to Gantt page
SVAR Vue Gantt is a Vue 3 component for creating web-based, interactive Gantt charts.
  • tasks & dependencies
  • auto-scheduling
  • resource planning
  • 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

Kanban

SVAR component — light & dark theme

Go to Kanban page
SVAR Vue Kanban is a customizable Vue 3 task board component for project workflows.
  • drag-and-drop
  • card templates
  • filtering & grouping
  • undo/redo support
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

File Manager

SVAR component — light & dark theme

Go to File Manager page
SVAR Vue File Manager offers a familiar UI to browse, organize, and manage files.
  • backend agnostic
  • multiple views
  • keyboard shortcuts
  • context menu
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

AI-Ready
Vue UI Components

SVAR Vue UI components are ready for AI-assisted development workflows. A complete AI integration ecosystem makes setup, configuration, and advanced component usage easier from the start.

  • MCP server for live docs and samples
  • AI skills for accurate integration code
  • Context packs for ChatGPT, Copilot, and more

Ready for: Claude Code, Cursor, Codex CLI, Antigravity, ChatGPT, GitHub Copilot

Explore AI Setup Connect SVAR MCP Server

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

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

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

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

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.

Frequently Asked Questions

SVAR Vue is a collection of high-performance, Vue.js 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.
  • Kanban - An interactive kanban board with drag-and-drop support, customizable cards and columns.
  • File Manager - A Vue file explorer with multiple views, file operations, and preview support.
  • Filter Builder - A query builder for complex, multi-condition filters in Vue apps.
  • Editor - A customizable Vue component for building structured edit forms.
  • Core Library - 30+ Vue components for forms, navigation, and layout, with light and dark themes.
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, Calendar, and Kanban that add advanced enterprise features. See the details and prices on the Licenses page.
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

SVAR Calendar 2.7: Mobile Support, Editable Recurring Events & Timezone Support

September 16, 2026

SVAR Calendar 2.7 adds mobile support, a richer event editor, and Excel import to the open-source edition, plus dynamic loading, editable recurring events, timezone support, multi-resource events, undo/redo, and PDF/PNG/Excel export in PRO.

icon framework

SVAR Kanban: Interactive Task Board Component for Svelte, React, and Vue

June 24, 2026

Introducing SVAR Kanban: a framework-native task board component for Svelte, React, and Vue. Open-source core, with PRO features for large, complex boards.

icon framework

SVAR Gantt 2.7: Resource Planning, Task Grouping, Individual Calendars, and More

June 4, 2026

SVAR Gantt 2.7 adds resource planning, resource load visualization, individual calendars, task grouping, WBS codes, and better editing for React, Svelte, and Vue.