docs / instalação

Instalação

O pacote instala em um comando; você só precisa do React e do Tailwind CSS v4.

Instalar

Instale o pacote a partir do npm (publicado como vaiperui):

terminal

npm install vaiperui

Requisitos

react e react-dom são peer dependencies (versão >=19); seu projeto precisa já ter as duas instaladas. A lib é estilizada com Tailwind CSS v4, então seu projeto também precisa do Tailwind configurado.

Importar o CSS

Importe o stylesheet da lib uma única vez, junto do Tailwind, no seu CSS raiz:

globals.css

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

Importar componentes

Tudo é exportado a partir da raiz do pacote. Importe o componente que precisar e use:

Button.tsx

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

Dark mode

O dark mode é opt-in: adicione a classe dark em qualquer ancestral (normalmente o <html>). Sem ela, os componentes ficam exatamente como no modo claro. A variante dark já vem definida no vaiperui/theme.css.

app/layout.tsx

<html lang="pt-BR" className="dark">

As cores de superfície, texto e borda vêm de variáveis CSS (--vpd-surface, --vpd-surface-muted, --vpd-text, --vpd-text-placeholder, --vpd-border…). Para usar outra paleta no dark, sobrescreva as variáveis no seu CSS:

globals.css

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