Installation

Install the Vector Vesper CLI and add editable component source to your React app.

Install Vector Vesper once per project, then add only the components you need. The CLI writes source into your repository and uses your existing package manager for dependencies.

Prerequisites

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

Initialize your project

Run once in your project root using your preferred package runner:

npx vectorvesper init

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

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

Pass -y to accept the detected defaults without prompts.

Add a component

Run the add command with your package runner and the component slug:

npx vectorvesper add scroll-highlighter

This command will:

  • Copy the component's source into @/components/vv/scroll-highlighter/.
  • In JavaScript projects (tsx: false), transpile source to .jsx/.js and generate .d.ts type sidecars for editor autocomplete (details).
  • Auto-detect your lockfile and install any peer dependencies (e.g. gsap, three) with your package manager.
  • Print usage snippets and component-specific notes (SSR, Tailwind).

Browse every available component on the components catalogue, or run npx vectorvesper list.

Use the component

Import the component directly from your alias:

import ScrollHighlighter from "@/components/vv/scroll-highlighter";

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

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

Next steps