Installation

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

Getting started 2 min read

What follows is what the copied code expects to find in your app. It’s a short list.

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 two roles, read from two variables:

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. React and Next.js also get a generated wrapper (VsX.tsx) and TypeScript types (vs-x.d.ts) in the code panel, so arrays, booleans and events just work as props. Vue, Nuxt, Svelte, Angular and Astro need one line of setup at most — see React, Next.js & other frameworks.