Installation

Get VV components into your React app in three steps.

Prerequisites

  • Node.js 18+
  • A React 18+ app — Next.js (App Router) or Vite
  • (Optional) Tailwind CSS — required by some components (details)

Note: the examples use npx, which ships with Node and works in any project. On pnpm, yarn, or bun, swap the runner: pnpm dlx vectorvesper …, yarn dlx vectorvesper …, or bunx vectorvesper …. The CLI auto-detects your package manager from its lockfile and installs component dependencies with it.

1. Initialize your project

Run once, in your project root:

terminal
BASH 
npx vectorvesper init

It detects your framework, whether you use a src/ directory, and Tailwind, then writes a vv.config.json:

source
JSON 
{
  "tsx": true,
  "framework": "next",
  "aliases": { "vv": "@/components/vv" }
}

Pass -y to accept the detected defaults without prompts.

2. Add a component

terminal
BASH 
npx vectorvesper add scroll-highlighter

This will:

  • copy the component's source into @/components/vv/scroll-highlighter/
  • in a JavaScript project (tsx: false), transpile that source to .jsx/.js and add a .d.ts type sidecar, so you keep full autocomplete (details)
  • install any peer dependencies (e.g. gsap) with your package manager
  • print usage notes (SSR, Tailwind) specific to that component

Browse every available slug on the components page, or run npx vectorvesper list.

3. Use it

source
TSX 
import { ScrollHighlighter } from "@/components/vv/scroll-highlighter";

export default function Page() {
  return <ScrollHighlighter>Highlight text on scroll</ScrollHighlighter>;
}

For WebGL components on Next.js, you must disable SSR. See the Next.js guide for code snippets and details.

Next steps