Introduction
What Vitral is and what lives in which package.
Vitral is a Vue 3 component library with design tokens in three layers, presets, pass-through to any part, an unstyled mode and composables for toasts and confirmations. The look is a parameter: the presets range from web-native to desktop, and your own sits on the same tokens.
The set covers the controls an application is built from, the bigger pieces (charts, a scheduler, a task board, a rich text editor) and the layout panels every real screen needs: StackPanel, DockPanel, Grid with star sizing, SplitView and Splitter.
Vitral is Portuguese for stained glass.
The look is a parameter
None of the above is baked in. A theme is a tree of tokens compiled to CSS variables, so the same components render as Prism, Ink, Avalonia or anything you define, with no fork, no rebuild and no second component library.
What it looks like to use
<script setup lang="ts">
import { Button, InputText, Select } from '@vitral/vue';
import { ref } from 'vue';
const name = ref('');
const city = ref(null);
const cities = [
{ name: 'São Paulo', code: 'SP' },
{ name: 'Recife', code: 'REC' }
];
</script>
<template>
<label for="name">Name</label>
<InputText id="name" v-model="name" clearable />
<label for="city">City</label>
<Select id="city" v-model="city" :options="cities" option-label="name" option-value="code" filter />
<Button label="Save" icon="check" />
</template>The packages
| Package | What it holds | Framework |
|---|---|---|
| @vitral/core | Focus trap, dismissable layer stack, positioning, z-index, list navigation and typeahead, the data layer (FilterService, queryData, createDataSource), trees, calendar maths, number formatting and parsing, locales | None |
| @vitral/themes | The token engine (definePreset, palette, compileTheme, createThemeManager) and the presets Prism, Ink, Avalonia and Simple | None |
| @vitral/styles | Every component's CSS and class map, written against tokens, also shipped as one vitral.css | None |
| @vitral/icons | SVG icons as data | None |
| @vitral/dom | What the framework-free packages render with: a keyed patcher, part classes with pass-through, a pointer drag, an auto-scroll and an icon | None |
| @vitral/controls | The select, the menu and the anchored panel those packages need, over the same core arithmetic and wearing the same styles | None |
| @vitral/chart | SVG charts: the engine and createChart(), a renderer with legend, tooltip, toolbar, zoom, brush and keyboard. The <Chart> component wraps it | None |
| @vitral/datagrid | The data table: the engine (query, sort, filter, pages, selection, the column layout) and createDataGrid(), which draws a real <table> | None |
| @vitral/schedule | The calendar and scheduler: the engine (views, periods, recurrence, layout) and createSchedule(), with the keyboard and the pointer gestures | None |
| @vitral/taskboard | The task board: the engine (columns, lanes, moves, work-in-progress limits) and createTaskboard(), with drag and drop a keyboard can do too | None |
| @vitral/editor | The rich text editor's interface over the engine in core: createTextEditor(), the toolbar, the panels, the floating toolbar, the slash menu and the block handle | None |
| @vitral/spreadsheet | The spreadsheet: the engine (A1 references, formulas, the dependency graph that says what an edit reaches) and createSpreadsheet(), a virtualised grid with the keyboard a spreadsheet has always had | None |
| @vitral/forms | Form state and validation: nested paths, field arrays, built-in rules, async checks, and resolvers for schema libraries | None |
| @vitral/vue | Components, composables, directives and the plugin | Vue 3 |
| @vitral/nuxt | The Nuxt module: configuration from nuxt.config, auto-imports, styles rendered on the server, the scheme in a cookie | Nuxt 4 |
Everything that does not need a framework lives in a package that does not import one. That is what should make a React or Angular adapter cheap later: it writes the rendering and reuses the behaviour, the look and the markup contract. Seven of them go further: the chart, the table, the scheduler, the board, the editor and the spreadsheet draw themselves, and the form's rules draw nothing at all — so <Chart> and its like are wrappers, and a page with no framework calls the same function they do.
For coding agents
This documentation is also published as plain text, in the shape llmstxt.org describes, so an assistant can read it without a browser: llms.txt is the index, llms-full.txt is every page in one file, and any page becomes Markdown by adding .md to its URL. A component's text carries its props, events and slots, read from the source, and the full source of the examples on its page.
Where to go next
- Installation: the plugin, its options, auto-imports and the no-JavaScript route.
- Server rendering: SSR and the Nuxt module.
- Theming: how a token becomes a CSS variable, and how to change one.
- Presets: the themes that ship, and how to start your own.
- Templates: whole applications built from the components, to preview and copy.
- Components: the catalog, with live examples and API tables.