v0.2 Vue 3 and Nuxt today, React and Angular next

Components that take the shape of your brand

Vitral is a Vue component library with a theme engine underneath: change a few tokens and every control follows.

Get started Browse components

$ add @vitral/vue

Revenue+12.4%

$48.2K

Reviewers

AGK+3

Alerts

components: 105
icons: 799
templates: 10
on every component: WAI-ARIA

Everything an interface needs, in one set

Built to be re-dressed rather than restyled, and tested the way people actually use it: with a keyboard and a screen reader.

Design tokens
Primitive, semantic and component layers, compiled to CSS variables. Change the primary colour and everything follows.
Built to the ARIA patterns
Each component follows its WAI-ARIA pattern and ships with a spec that runs axe and drives the keyboard. Text contrast is measured across every preset and both schemes, so a theme cannot quietly become unreadable.
Yours to override
Reach any element with pass-through, retoken one instance, or go unstyled and bring your own CSS.
A predictable API
The same props, slots and events everywhere: size, variant, invalid, fluid. Learning one component covers most of the next.
Light and dark
Both schemes come out of the same preset, and follow the operating system unless the reader says otherwise.
Icons included
An outline set drawn for the library, tree-shaken per icon. Any other icon library works too.
Application pieces
Charts, a scheduler and a task board sit next to the form controls, themed by the same tokens.
Forms and validation
Field state, rules and async checks with no dependency, plus resolvers for Zod, Yup, Valibot and Superstruct.
Server rendering
Styles are collected during the render and go into the head, so nothing arrives unstyled. Nuxt takes one line in nuxt.config.

105 components, grouped the way you look for them

From a text box to a scheduler, each with live examples and its API.

Browse components

Your brand in a few lines

A preset is a tree of tokens over another preset. Pick a colour below and the whole site, this page included, changes with it.

theme.ts

import { definePreset, palette, Prism } from '@vitral/vue';

export const Brand = definePreset(Prism, {
    semantic: { primary: palette('#2563eb') },
    components: {
        button: { root: { borderRadius: '999px' } }
    }
});

Read the theming guide