Installation

Install the package from npm (published as vaiperui):

npm install vaiperui

react and react-dom are peer dependencies (version >=19); your project must already have both installed. The library is styled with Tailwind CSS v4, so your project also needs Tailwind configured.

Import the library stylesheet once, next to Tailwind, in your root CSS:

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

Everything is exported from the package root. Import the component you need and use it:

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

Dark mode is opt-in: add the dark class to any ancestor (usually the <html>). Without it, components look exactly like light mode. The dark variant already ships in vaiperui/theme.css.

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

Surface, text and border colors come from CSS variables (--vpd-surface, --vpd-surface-muted, --vpd-text, --vpd-text-placeholder, --vpd-border…). To use another palette in dark mode, override the variables in your CSS:

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