Começando

Com o CSS importado, usar um componente é uma linha. Aqui, um Button com a variante primária:

import { Button } from "vaiperui";
 
export function Salvar() {
  return <Button variantColor="primary">Salvar</Button>;
}

Os componentes compartilham as mesmas props de layout — variantColor, size, radius e animation. O Button soma ainda variant e hover; veja a referência de cada componente para a lista completa.

<Button variantColor="success" radius="full">
  Confirmar
</Button>
<Button variant="outlined" variantColor="warning">
  Revisar
</Button>
<Button variantColor="danger" hover="lift">
  Excluir
</Button>

O Input formata CPF, telefones, cartões, datas e outros documentos automaticamente enquanto o usuário digita. Basta passar mask.

import { Input } from "vaiperui";
 
export function Cpf() {
  return <Input label="CPF" mask="cpf" />;
}