Installation

What a Vuesax component expects from your project — and what happens when it isn't there.

There is nothing to install from us. What follows is what the copied code expects to find in your app.

Requirements

Every item is zero-dependency — one self-contained vs-*.js file, occasionally with a sibling vs-*.js it reuses. There is nothing to npm install; the effects, styles and any WebGL that used to lean on three/gsap are all inlined in the file.

Registering an element

Importing a component’s file runs its customElements.define(...), so the tag becomes available everywhere after a single import:

import './vs-button.js';   // once, anywhere before the tag is used

No global stylesheet, no plugin, no config. The effects (proximity glow, press ripple) travel inside the element itself.

Theming is optional

Every token reference in a component ships with a literal fallback:

.btn--md { --h: var(--ctrl-h-md, 40px); --r: var(--ctrl-r-md, 12px); }

So an element dropped into a project with no design tokens renders at the right size with the right radius — it just uses our values instead of yours. Define the matching custom properties on :root (grab the token sheet from any component’s code panel via Include globals, or over MCP with includeGlobals: true) and everything snaps to your theme without touching a component.

:root {
  --text: #e6e6e6;
  --border: #2a2a2a;
  --ctrl-h-md: 40px;
  /* …the rest of your palette and control scale */
}
:root[data-theme='light'] { /* your light overrides */ }

No build step, no utility framework

Elements carry their own styles (in shadow DOM) driven by design tokens — no utility framework, no PostCSS plugin, no config file. Drop one in and it styles itself; the only thing it reads from your project is the tokens, and even those are optional thanks to the literal fallbacks.

Fonts

Components inherit whatever font you set. The catalog uses Outfit for UI and Geist Mono for code, read from --font-sans and --font-mono. Point those two at your own faces and every component follows.

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

Using it in a framework

Same file, everywhere. In React/Solid pass strings as attributes and set object/array inputs via a ref; in Svelte use bind:value; in Vue use v-model. On the server, custom elements upgrade on the client, so guard SSR the way your framework does (<ClientOnly> in Nuxt, client:only in Astro) around a heavy WebGL animation.