Skip to content
VEXA
Open Code · React & Next.js

Interfaces, engineered.

VEXA is the Valfiguer Experience Architecture — an Open Code interface system. You do not install a runtime component library; you copy accessible component source into your product and own it, styled entirely through semantic design tokens.

Own the code. Shape the system.

Deployment

Production · vexa

Live
v0.1.024 components3 themes

Server-first by default

This card is a Server Component — no client JavaScript.

A system, not a dependency

Everything VEXA ships is readable, editable, and yours — from the token contract to the last focus ring.

Open Code

Install component source, not a black box. Read it, change it, delete it — the interface belongs to your repository.

Server-first (RSC)

Primitives render as Server Components by default. The 'use client' boundary sits only at the smallest interactive leaf.

Three themes, one contract

Light, Obsidian, and Graphite ship from a single set of semantic HSL tokens. Switch with one data attribute.

Accessible by architecture

WCAG 2.2 AA is built into the primitives, examples, and tests — keyboard models, focus, and contrast, never bolted on.

AI-native

An MCP server and a Design Skill expose the catalog, tokens, and rules so coding agents assemble VEXA UI correctly.

shadcn-compatible registry

Items follow the shadcn registry schema, so you can install with tooling you already know or copy the source by hand.

The Open Code loop

Four steps take a primitive from the registry into code you own.

  1. 01

    Find it

    Browse the gallery or ask the MCP server to search the catalog.

  2. 02

    Add it

    Run the install command, or copy the source into components/vexa.

  3. 03

    Own it

    The files are yours: edit behavior in the source instead of a prop API.

  4. 04

    Theme it

    Style only through --vexa-* tokens so every theme stays consistent.

The three themes

Light is the default at :root. The dark themes activate through a single data attribute on <html> (or any scoped element).

Light

Neutral, editorial, high clarity.

Obsidian

Near-black, low-emission, high contrast.

Graphite

Balanced dark-gray surfaces for dense tools.

Start building

Configure the registry once, then add your first accessible primitive.