v0.2 Vue 3 e Nuxt hoje, React e Angular em seguida

Componentes que tomam a forma da sua marca

Vitral é uma biblioteca de componentes Vue com um motor de temas por baixo: mude alguns tokens e todos os controles acompanham.

Primeiros passos Ver componentes

$ add @vitral/vue

Receita+12.4%

$48.2K

Revisores

AGK+3

Alertas

componentes: 105
ícones: 799
templates: 10
em todos os componentes: WAI-ARIA

Tudo de que uma interface precisa, num só conjunto

Feito para trocar de roupa, não para ser reestilizado, e testado do jeito que as pessoas de fato o usam: com teclado e leitor de tela.

Design tokens
Camadas primitiva, semântica e de componente, compiladas em variáveis CSS. Mude a cor primária e todo o resto acompanha.
Construído sobre os padrões ARIA
Cada componente segue seu padrão WAI-ARIA e vem com um spec que roda o axe e conduz o teclado. O contraste do texto é medido em todos os presets e nos dois esquemas, então um tema não fica ilegível sem que ninguém perceba.
Seu para sobrescrever
Alcance qualquer elemento com pass-through, troque os tokens de uma única instância ou use o modo sem estilo e traga seu próprio CSS.
Uma API previsível
As mesmas props, slots e eventos em toda parte: size, variant, invalid, fluid. Aprender um componente já cobre quase tudo do próximo.
Claro e escuro
Os dois esquemas saem do mesmo preset e seguem o sistema operacional, a menos que o leitor diga outra coisa.
Ícones incluídos
Um conjunto de contorno desenhado para a biblioteca, com tree-shaking por ícone. Qualquer outra biblioteca de ícones também funciona.
Peças de aplicação
Gráficos, uma agenda e um quadro de tarefas ficam ao lado dos controles de formulário, com o tema vindo dos mesmos tokens.
Formulários e validação
Estado de campo, regras e verificações assíncronas sem nenhuma dependência, além de resolvers para Zod, Yup, Valibot e Superstruct.
Renderização no servidor
Os estilos são coletados durante a renderização e vão para o head, então nada chega sem estilo. No Nuxt, basta uma linha no nuxt.config.

105 componentes, agrupados do jeito que você os procura

De uma caixa de texto a uma agenda, cada um com exemplos ao vivo e sua API.

Ver componentes

Sua marca em poucas linhas

Um preset é uma árvore de tokens sobre outro preset. Escolha uma cor abaixo e o site inteiro, esta página incluída, muda junto.

theme.ts

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

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

Ler o guia de temas