Installation

Requirements

• •React 19 and Next.js App Router (or any React 19 setup).
• •Tailwind CSS v4.
• •A components.json with the @vexa registry configured.

1. Configure the registry

Add the @vexa namespace to your components.json so the shadcn CLI knows where to resolve @vexa/* items:

{
  "registries": {
    "@vexa": "https://vexa.valfiguer.com/r/{name}.json"
  }
}

2. Install the theme

Add the token contract once. It defines the --vexa-* semantic tokens for all three themes plus the Tailwind v4 mapping. Import it after Tailwind:

Then import the stylesheet in your global CSS:

/* app/globals.css */
@import "tailwindcss";
@import "./vexa.css"; /* the installed VEXA token contract */

3. Add your first component

Install a primitive. Its registry dependencies (like @vexa/utils, which provides the cn helper) are resolved automatically:

Files land in your project as source — components/vexa/button.tsx and lib/utils.ts — ready to read and edit.

4. Use it

Import from your alias and compose. Static primitives stay on the server; attach interactivity at the client leaf.

import { Button } from "@/components/vexa/button";

// Server Component — no "use client" needed.
export function SaveBar() {
  return <Button variant="primary">Save changes</Button>;
}