What UI Components Does SVAR UI Offer?

Updated

SVAR UI provides five main component families for React, Svelte, and Vue: Gantt Chart, DataGrid, Calendar, Kanban, and File Manager. Each is built natively for those three frameworks, and several have PRO editions that add advanced features for enterprise use. The open-source versions cover core functionality; PRO is where scheduling dependencies, recurring events, and similar advanced capabilities live.

The five components and what they do

Component Primary use Notable capabilities Editions
Gantt Chart Project planning and resource scheduling Task dependencies, drag-and-drop editing, customizable timelines Open-source + PRO
DataGrid High-performance data management Sorting, filtering, editing, virtualization Open-source
Calendar Event management and scheduling Flexible views, calendar groups, recurring events Open-source + PRO
Kanban Task boards for project management and team workflows Ready-to-use, customizable boards Open-source + PRO
File Manager File browsing and management Multiple views, file preview, standard file operations Open-source

The site also lists "building blocks" such as advanced filtering logic and configurable pieces that support the main components.

How to choose between them

Pick based on the job you need done, not on feature count:

  • Scheduling work over time with dependencies → Gantt Chart. It is the only component described with task dependencies and timeline editing, so it fits project plans and resource allocation.
  • Large datasets that need to stay responsive → DataGrid. Virtualization is the key signal here: it is built for volume, with sorting, filtering, and editing on top.
  • Events, bookings, or recurring schedules → Calendar. Recurring events and calendar groups are the distinguishing features.
  • Team workflow and task tracking → Kanban. A board model for moving work through stages.
  • Browsing or managing files inside an app → File Manager. Multiple views plus preview and standard file operations.

If you need more than one, they are designed to sit alongside each other in the same app since they share the same framework-native approach.

Framework integration

SVAR components are built natively for React, Svelte, and Vue rather than wrapped. According to the site, you can drop them into application frameworks including Next.js, Nuxt, and SvelteKit. The stated developer experience points are:

  • Minimal boilerplate — you configure complete components instead of composing low-level primitives.
  • TypeScript support — strong type definitions for autocomplete, early error detection, and safer refactoring. The site gives this example:
api.on("open-file", ({ id }: OpenFileEvent) => openFile(id));
  • AI-assisted development — SVAR offers an MCP server, agent skills, and context packs, and lists compatibility with Claude Code, Cursor, Codex CLI, Antigravity, ChatGPT, and GitHub Copilot.

What to verify before committing

The site distinguishes open-source components from PRO editions but does not publish pricing on the pages reviewed here, so check the Licenses page for current terms and which features sit behind PRO. If your project depends on a specific capability — recurring events, task dependencies, or virtualization — confirm it is in the edition you plan to use rather than assuming it is in the open-source build.