Primeros pasos

Con el CSS importado, usar un componente es una línea. Aquí, un Button con la variante primaria:

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

Los componentes comparten las mismas props de diseño — variantColor, size, radius y animation. El Button suma además variant y hover; consulta la referencia de cada componente para la lista completa.

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

El Input formatea teléfonos, tarjetas, fechas y documentos automáticamente mientras el usuario escribe. Basta con pasar mask.

import { Input } from "vaiperui";
 
export function Telefono() {
  return <Input label="Teléfono" mask="phone" />;
}