Vuesax is not a dependency. There is no npm install vuesax, no wrapper API to
learn and no version of ours to upgrade. You browse the catalog, take the
source of what you need, and it becomes your code — editable, renamable,
deletable.
Four catalogs:
- Components — buttons, inputs, selects, dialogs, tooltips, tables. Themed for light and dark, with proximity light and press effects already wired.
- Blocks — several components already assembled: login popups, mini dashboards, swap cards, widgets.
- Sections — full page blocks: heroes, pricing tables, FAQs, navbars, footers.
- Animations — canvas and WebGL effects, viewport-gated and reduced-motion aware.
Two ways to use it
Both hand you the same files. The MCP route just skips the browser: you describe what you want, and your assistant pulls the real source and wires it into your project.
What you should know first
Every component is a native Web Component (a standard custom element) in one
self-contained .js file — no framework, no utility CSS, no build step. It runs
the same in React, Svelte, Vue, Angular, Solid or a plain HTML page. It expects
one thing from your project:
- The design tokens — CSS custom properties like
--text,--border,--ctrl-h-md.
And even that isn’t a hard requirement. Every token reference ships with a literal
fallback (var(--ctrl-h-md, 40px)), so a component dropped into a project with
no tokens still renders correctly — it just stops following your theme. See
Installation.