Instalación

Instala el paquete desde npm (publicado como vaiperui):

npm install vaiperui

react y react-dom son peer dependencies (versión >=19); tu proyecto ya debe tener ambos instalados. La librería usa Tailwind CSS v4, así que tu proyecto también necesita Tailwind configurado.

Importa la hoja de estilos de la librería una sola vez, junto con Tailwind, en tu CSS raíz:

@import "tailwindcss";
@import "vaiperui/theme.css";
 
@source "../node_modules/vaiperui/dist";

Todo se exporta desde la raíz del paquete. Importa el componente que necesites y úsalo:

import { Button } from "vaiperui";
 
export function Ejemplo() {
  return <Button variantColor="primary">Haz clic aquí</Button>;
}

El modo oscuro es opt-in: agrega la clase dark a cualquier ancestro (normalmente el <html>). Sin ella, los componentes se ven exactamente como en el modo claro. La variante dark ya viene definida en vaiperui/theme.css.

<html lang="es" className="dark">

Los colores de superficie, texto y borde vienen de variables CSS (--vpd-surface, --vpd-surface-muted, --vpd-text, --vpd-text-placeholder, --vpd-border…). Para usar otra paleta en modo oscuro, sobrescribe las variables en tu CSS:

.dark {
  --vpd-surface: #0b0f19;
  --vpd-surface-muted: #131a2a;
  --vpd-text: #e2e8f0;
  --vpd-border: #1f2937;
}